VIEW DEMO
Step1. 创建HTML
<div class="examples_body"> <h3>Demo</h3> <div id="slideshow"> <div class="container"> <div class="slide" id="slide-0" style="background-image: url(images/1.jpg); display: block;" mce_style="background-image: url(images/1.jpg); display: block;"></div> <div class="slide" id="slide-1" style="background-image: url(images/2.jpg); display: none;" mce_style="background-image: url(images/2.jpg); display: none;"></div> <div class="slide" id="slide-2" style="background-image: url(images/3.jpg); display: none;" mce_style="background-image: url(images/3.jpg); display: none;"></div> <div class="slide" id="slide-3" style="background-image: url(images/4.jpg); display: none;" mce_style="background-image: url(images/4.jpg); display: none;"></div> </div> <div class="paging"> <a href="javascript:;" mce_href="javascript:;" id="paging-0" οnclick="Slideshow.jump(0, this);" οnmοuseοver="Slideshow.preview(0);" class="current"> </a> <a href="javascript:;" mce_href="javascript:;" id="paging-1" οnclick="Slideshow.jump(1, this);" οnmοuseοver="Slideshow.preview(1);" class=""> </a> <a href="javascript:;" mce_href="javascript:;" id="paging-2" οnclick="Slideshow.jump(2, this);" οnmοuseοver="Slideshow.preview(2);" class=""> </a> <a href="javascript:;" mce_href="javascript:;" id="paging-3" οnclick="Slideshow.jump(3, this);" οnmοuseοver="Slideshow.preview(3);" class="last-slide"> </a> </div> <div class="caption"><h3><a href="http://kr.battle.net/wow/ko/blog/472453" mce_href="http://kr.battle.net/wow/ko/blog/472453" class="link">A New Age Has Begun...</a></h3>The undead armies of the Lich King have been vanquished, and the campaign in Northrend has come to an end.</div> <div class="preview"></div> <div class="mask"></div> </div>
Step2. 创建CSS
#slideshow { width: 640px; height: 300px; overflow: hidden; position: relative; margin: 0 auto; } #slideshow .container { width: 640px; height: 300px; position: relative; z-index: 10; } #slideshow .mask { width: 640px; cursor: pointer; height: 300px; left: 0; position: absolute; top: 0; z-index: 30; } #slideshow .caption { width: 580px; bottom: 30px; left: 30px; position: absolute; z-index: 35; } #slideshow .caption h3 { color: #FFFFFF; font-weight: bold; background: none; margin: 0; padding: 0; } #slideshow .caption h3 a { font-size: 20px; color: #FFF8D6; padding-bottom: 5px; display: block; text-decoration: underline; } #slideshow .caption h3 a:hover { color: #FFF; text-decoration: none; } #slideshow .paging { width: 15px; position: absolute; right: 15px; top: 15px; z-index: 35; } #slideshow .paging a { -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; background-color: #FFFFFF; display: block; height: 10px; margin-bottom: 5px; opacity: 0.5; filter:alpha(opacity=50); } #slideshow .paging a:hover, #slideshow .paging a.current { opacity: 1; filter:alpha(opacity=100); } #slideshow .preview { -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; width: 100px; background: #FFFFFF; color: #000000; display: none; padding: 5px; position: absolute; right: 35px; text-align: center; top: 15px; z-index: 35; font-size: 82%; } #slideshow .preview span { display: block; padding-top: 3px; } #slideshow .slide { width:640px; height: 300px; height: 300px; background-position: 0 0; background-repeat: no-repeat; left: 0; position: absolute; top: 0; z-index: 15; } #slideshow .slide .click-area { width: 640px; height: 300px; bottom: 0; left: 0; position: absolute; z-index: 20; } #slideshow .slide .click-area embed { z-index: 25; }
Step3. 插入jQuery和脚本包
脚本:
$(function() { Slideshow.initialize('#slideshow', [ { image: "images/1.jpg", desc: "The undead armies of the Lich King have been vanquished, and the campaign in Northrend has come to an end. ", title: "A New Age Has Begun...", url: "http://kr.battle.net/wow/ko/blog/472456#blog", id: "473947" }, { image: "images/2.jpg", desc: "The Blizzard Art gallery has been updated with 4 pieces representing the Warcraft universe. ", title: "New Fan Art", url: "http://kr.battle.net/wow/ko/blog/483410#blog", id: "431948" }, { image: "images/3.jpg", desc: "We're pleased to unveil the new World of Warcraft: Cataclysm game information page. ", title: "Cataclysm Info Page is Live", url: "http://kr.battle.net/wow/ko/blog/483412#blog", id: "494593" }, { image: "images/4.jpg", desc: "The Blizzard Fan Art Section has been updated with 4 new pieces of fan artwork set within the Warcraft universe. ", title: "Blizzard Art Gallery Update", url: "http://kr.battle.net/wow/ko/blog/472453", id: "473946" } ]); });
脚本包:
<mce:script type="text/javascript" src="js/slideshow.js" mce_src="js/slideshow.js"></mce:script> <mce:script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></mce:script>
DOWNLOAD
