HTML5 add triple switch imitation 3D effect Carousel jquery Plugin Tutorial

I. Methods of Use

<script type= "Text/javascript" src= "Js/jquery.min.js" ></script>

<script type= "Text/javascript" src= "Js/gallery.js" ></script>

Second, HTML structure

<div id= "wrapper" >

<div id= "MainContent" >

<div id= "Huadong" >

<ul class= "Show_images_list" >

<li class= "Show_images_list_li show_images_1" style= "z-index:15"; top:1px; left:200px; " >

<a href= "#" target= "_blank" >

</a>

</li>

<li class= "Show_images_list_li show_images_2" style= "z-index:10"; top:20px; left:0px; " >

<a href= "#" target= "_blank" >

</a>

</li>

<li class= "Show_images_list_li show_images_3" style= "Z-index:5"; top:20px; left:459px; " >

<a href= "#" target= "_blank" >

</a>

</li>

<li class= "Show_images_list_li show_images_4" style= "z-index:0"; top:20px; left:200px; " >

<a href= "#" target= "_blank" >

</a>

</li>

</ul>

</div>

<div class= "BTN" >

<a class= "BTN1" rel= "1" ></a>

<a class= "btn2" rel= "2" ></a>

<a class= "Btn3" rel= "3" ></a>

<a class= "Btn4" rel= "4" ></a>

</div>

</div>

</div>

Third, CSS style

#wrapper {width:1000px;margin:50px auto;position:relative;}

FieldSet, img {border:0;}

img {display:inline-block;}

OL, ul {list-style:none outside none;}

. show_images_list_li {

Position:absolute;

Cursor:pointer;

Vertical-align:bottom;

Display:block;

}

. btn {

width:101px;

height:25px;

Margin:auto;

position:relative;

padding-top:370px;

}

. BTN a{

width:17px;

height:15px;

Overflow:none;

Display:block;

Background:url (images/btn.png) 0 0 no-repeat;

Cursor:pointer;

Float:left;

}

. BTN a.active{

Background:url (images/btn.png) -17px 0 no-repeat;

}

. show_images_list_li img{width:527px; height:310px;}

. show_images_list_li:first-child img{width:599px; height:353px;}

Iv. Initializing Plugins

$ (function () {

$ (". Btn"). Show ();

$ (". BTN A:first"). AddClass ("active");

$ (). Gallery ({

Current: [". Show_images_1", ". Show_images_1_img"],

Left: [". Show_images_2", ". Show_images_2_img"],

Right: [". Show_images_3", ". Show_images_3_img"],

None: [". Show_images_4", ". Show_images_4_img"],

DURATION:500,

Start:function () {

$ (". Header_text"). FadeOut (150);

},

End:function () {

$ (". Header_text"). FadeIn (150);

},

Autochange:true,

changetimeout:3000,

Stoptarget: ". Header_stage"

});

});

Keymob Mobile Advertising Platform is the leading mobile marketing platform in China, designed to provide advertisers with accurate data and create the best revenue and brand value.

HTML5 add triple switch imitation 3D effect Carousel jquery Plugin Tutorial