标签：
一、使用方法
<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移动端广告平台是国内领先的移动营销平台，旨在为广告主提供精准的数据，创造最佳的收入和品牌价值。
Html5添加三联切换仿3D效果旋转木马jQuery插件教程
标签：