魔獸世界官方網站的投影片效果 CSS & jQuery

 

VIEW DEMO

 

Step1. 建立HTML

<div class="examples_body"><br /><h3>Demo</h3><br /><div id="slideshow"><br /><div class="container"><br /> <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><br /> <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><br /> <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><br /> <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><br /></div><br /><div class="paging"><br /><a href="javascript:;" mce_href="javascript:;" id="paging-0" onclick="Slideshow.jump(0, this);" onmouseover="Slideshow.preview(0);" class="current"><br /></a><br /><a href="javascript:;" mce_href="javascript:;" id="paging-1" onclick="Slideshow.jump(1, this);" onmouseover="Slideshow.preview(1);" class=""><br /></a><br /><a href="javascript:;" mce_href="javascript:;" id="paging-2" onclick="Slideshow.jump(2, this);" onmouseover="Slideshow.preview(2);" class=""><br /></a><br /><a href="javascript:;" mce_href="javascript:;" id="paging-3" onclick="Slideshow.jump(3, this);" onmouseover="Slideshow.preview(3);" class="last-slide"><br /></a><br /></div><br /><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><br /><div class="preview"></div><br /><div class="mask"></div><br /></div>

 

Step2. 建立CSS

 

#slideshow {<br />width: 640px;<br />height: 300px;<br />overflow: hidden;<br />position: relative;<br />margin: 0 auto;<br />}<br />#slideshow .container {<br />width: 640px;<br />height: 300px;<br />position: relative;<br />z-index: 10;<br />}<br />#slideshow .mask {<br />width: 640px;<br />cursor: pointer;<br />height: 300px;<br />left: 0;<br />position: absolute;<br />top: 0;<br />z-index: 30;<br />}<br />#slideshow .caption {<br />width: 580px;<br />bottom: 30px;<br />left: 30px;<br />position: absolute;<br />z-index: 35;<br />}<br />#slideshow .caption h3 {<br />color: #FFFFFF;<br />font-weight: bold;<br />background: none;<br />margin: 0;<br />padding: 0;<br />}<br />#slideshow .caption h3 a {<br />font-size: 20px;<br />color: #FFF8D6;<br />padding-bottom: 5px;<br />display: block;<br />text-decoration: underline;<br />}<br />#slideshow .caption h3 a:hover {<br />color: #FFF;<br />text-decoration: none;<br />}<br />#slideshow .paging {<br />width: 15px;<br />position: absolute;<br />right: 15px;<br />top: 15px;<br />z-index: 35;<br />}<br />#slideshow .paging a {<br />-moz-border-radius-bottomleft: 3px;<br />-moz-border-radius-bottomright: 3px;<br />-moz-border-radius-topleft: 3px;<br />-moz-border-radius-topright: 3px;<br />background-color: #FFFFFF;<br />display: block;<br />height: 10px;<br />margin-bottom: 5px;<br />opacity: 0.5;<br />filter:alpha(opacity=50);<br />}<br />#slideshow .paging a:hover, #slideshow .paging a.current {<br />opacity: 1;<br />filter:alpha(opacity=100);<br />}<br />#slideshow .preview {<br />-moz-border-radius-bottomleft: 5px;<br />-moz-border-radius-bottomright: 5px;<br />-moz-border-radius-topleft: 5px;<br />-moz-border-radius-topright: 5px;<br />width: 100px;<br />background: #FFFFFF;<br />color: #000000;<br />display: none;<br />padding: 5px;<br />position: absolute;<br />right: 35px;<br />text-align: center;<br />top: 15px;<br />z-index: 35;<br />font-size: 82%;<br />}<br />#slideshow .preview span {<br />display: block;<br />padding-top: 3px;<br />}<br />#slideshow .slide {<br />width:640px;<br />height: 300px;<br />height: 300px;<br />background-position: 0 0;<br />background-repeat: no-repeat;<br />left: 0;<br />position: absolute;<br />top: 0;<br />z-index: 15;<br />}<br />#slideshow .slide .click-area {<br />width: 640px;<br />height: 300px;<br />bottom: 0;<br />left: 0;<br />position: absolute;<br />z-index: 20;<br />}<br />#slideshow .slide .click-area embed {<br />z-index: 25;<br />}

 

Step3. 插入jQuery和指令碼包

指令碼:

$(function() {<br />Slideshow.initialize('#slideshow', [<br />{<br />image: "images/1.jpg",<br />desc: "The undead armies of the Lich King have been vanquished, and the campaign in Northrend has come to an end. ",<br />title: "A New Age Has Begun...",<br />url: "http://kr.battle.net/wow/ko/blog/472456#blog",<br />id: "473947"<br />},<br />{<br />image: "images/2.jpg",<br />desc: "The Blizzard Art gallery has been updated with 4 pieces representing the Warcraft universe. ",<br />title: "New Fan Art",<br />url: "http://kr.battle.net/wow/ko/blog/483410#blog",<br />id: "431948"<br />},<br />{<br />image: "images/3.jpg",<br />desc: "We're pleased to unveil the new World of Warcraft: Cataclysm game information page. ",<br />title: "Cataclysm Info Page is Live",<br />url: "http://kr.battle.net/wow/ko/blog/483412#blog",<br />id: "494593"<br />},<br />{<br />image: "images/4.jpg",<br />desc: "The Blizzard Fan Art Section has been updated with 4 new pieces of fan artwork set within the Warcraft universe. ",<br />title: "Blizzard Art Gallery Update",<br />url: "http://kr.battle.net/wow/ko/blog/472453",<br />id: "473946"<br />}<br />]);<br />});

 

指令碼包:

<mce:script type="text/javascript" src="js/slideshow.js" mce_src="js/slideshow.js"></mce:script><br /><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