CSS & jquery

 

View demo

 

Step 1. Create HTML

<Div class = "examples_body"> <br/> <p> demo </p> <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 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 "> <p> <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> </p> 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>

 

Step 2. Create 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. 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. insert jquery and script packages

Script:

$ (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/> });

 

Script package:

<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