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