Html5添加三联切换仿3D效果旋转木马jQuery插件教程

一、使用方法

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

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

 

二、Html结构

<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">

<img  class="show_images_1_img" src="images/1.png">

</a>

</li>

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

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

<img class="show_images_2_img" src="images/2.png">

</a>

</li>

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

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

<img class="show_images_3_img" src="images/3.png">

</a>

</li>

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

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

<img class="show_images_4_img" src="images/4.png">

</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>             

 

三、CSS样式

#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;}              

 

四、初始化插件

$(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移动端广告平台是国内领先的移动营销平台，旨在为广告主提供精准的数据，创造最佳的收入和品牌价值。