最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。
兼容性如图:
html结构代码:
<div id="featured-area"> ul> li><img src="images/fnfast.jpg"/></> ="images/photoshop_plus.jpg"> ="images/speedometer.jpg"> </> a href="javascript:void(0)" class="ban_l_btn"></a="ban_r_btn"> div>
css样式:
#featured-area{height:337px;width:1200px;margin:40px auto 0 auto;position:relative;} .roundabout-holder{list-style:none;500px;300px;0px auto;} .roundabout-moveable-item{font-size:12px!important;600px;cursor:pointer;padding:5px;border:1px solid #aaaaaa;-webkit-border-radius:-moz-border-radius:background:#f9f9f9;} .roundabout-moveable-item img{100%;background-color:#FFFFFF;0;} .roundabout-in-focus{auto;} .roundabout-in-focus:hover{-webkit-Box-shadow:0px 0px 20px #787878;-moz-Box-shadow: .roundabout-holder span{display:none;} .roundabout-in-focus:hover span{inline;absolute;bottom:right:8px 20px;#f9f9f9;color:#3366cc;z-index:999;-webkit-border-top-left-radius:-moz-border-radius-topLeft:border-left:border-top:1px solid #aaaaaa;} .roundabout a:active,.roundabout a:focus,.roundabout a:visited{outline:text-decoration: .roundabout li{0} #featured-area .ban_l_btn,#featured-area .ban_r_btn{ position: absolute; top: 50%;margin-top:-34px; left:-1px; display: block; width: 65px; height: 68px; background: url(../images/wid65Btn.png) 0 0 ; z-index: 9; overflow: hidden; } #featured-area .ban_r_btn{auto; right: background-position: -65px 0; } #featured-area ul li div{ 100%;}
引入的js
script type="text/javascript" src="js/jquery-1.11.3.min.js"script="js/jquery.roundabout-1.0.min.js"> ="js/jquery.easing.1.3.js">
调用的一般形式:
$('主元素名称').roundabout({ duration: 600,// 运动速度 btnPrev: ".ban_r_btn",1)"> 右按钮 btnNext: ".ban_l_btn",1)"> 左按钮 autoplay: true,1)"> 自动播放 autoplayDuration: 1500,1)"> 自动播放的时间 minOpacity: 0,1)">最小的透明度 maxOpacity: 1,1)">最大的透明度 reflect: 为true时是从左向右移动,为false从右向左移动 startingChild: 3,1)"> 默认的显示第几张图片 autoplayInitialDelay: 5000,1)"> 从第几秒时,开始自动播放(默认毫秒)开始的第一次管用 autoplayPauSEOnHover: 鼠标移入元素内是否自动播放,为true不播放,false还自动播放 enableDrag: true 在移动端可以拖拽播放 });
实现的效果如图:
更多详解请查看地址:http://demo.niutuku.com/js/20/3/
当然该插件可扩展其它更多效果,如jQuery.Roundabout.js制作图片倾斜层叠切换效果,参考地址:http://www.uedsc.com/jquery-roundabout-js.html