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

Stella981

2021-10-11 18:54 • 阅读 832

一、使用方法

   

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