星空网 > 软件开发 > Java

jquery.roundabout.js实现3D图片层叠旋转木马切换

最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。

兼容性如图:

jquery.roundabout.js实现3D图片层叠旋转木马切换

html结构代码:

<div id="featured-area">   <ul>     <li><img src='/images/loading.gif' data-original="images/fnfast.jpg"/></li>    <li><img src='/images/loading.gif' data-original="images/photoshop_plus.jpg"/></li>     <li><img src='/images/loading.gif' data-original="images/speedometer.jpg"/></li>     <li><img src='/images/loading.gif' data-original="images/photoshop_plus.jpg"/></li>   </ul>  <a href="javascript:void(0)" class="ban_l_btn"></a>  <a href="javascript:void(0)" class="ban_r_btn"></a></div>

css样式:

#featured-area{height:337px;width:1200px;margin:40px auto 0 auto;position:relative;}.roundabout-holder{list-style:none;width:500px;height:300px;margin:0px auto;}.roundabout-moveable-item{font-size:12px!important;height:300px;width:600px;cursor:pointer;padding:5px;border:1px solid #aaaaaa;-webkit-border-radius:5px;-moz-border-radius:5px;background:#f9f9f9;}.roundabout-moveable-item img{height:100%;width:100%;background-color:#FFFFFF;margin:0;}.roundabout-in-focus{cursor:auto;}.roundabout-in-focus:hover{-webkit-box-shadow:0px 0px 20px #787878;-moz-box-shadow:0px 0px 20px #787878;background:#f9f9f9;}.roundabout-holder span{display:none;}.roundabout-in-focus:hover span{display:inline;position:absolute;bottom:5px;right:5px;padding:8px 20px;background:#f9f9f9;color:#3366cc;z-index:999;-webkit-border-top-left-radius:5px;-moz-border-radius-topLeft:5px;border-left:1px solid #aaaaaa;border-top:1px solid #aaaaaa;}.roundabout a:active, .roundabout a:focus, .roundabout a:visited{outline:none;text-decoration:none;}.roundabout li{margin: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{ left:auto; right:-1px; background-position: -65px 0; }#featured-area ul li div{width:100%;height: 100%;}

 

引入的js

<script type="text/javascript" src='/images/loading.gif' data-original="js/jquery-1.11.3.min.js"></script><script type="text/javascript" src='/images/loading.gif' data-original="js/jquery.roundabout-1.0.min.js"></script> <script type="text/javascript" src='/images/loading.gif' data-original="js/jquery.easing.1.3.js"></script> 

 

调用的一般形式:

$('主元素名称').roundabout({      duration: 600, // 运动速度      btnPrev: ".ban_r_btn", // 右按钮      btnNext: ".ban_l_btn", // 左按钮      autoplay: true,    // 自动播放      autoplayDuration: 1500,// 自动播放的时间      minOpacity: 0,     //最小的透明度      maxOpacity: 1,     //最大的透明度      reflect: true,     // 为true时是从左向右移动,为false从右向左移动      startingChild: 3,   // 默认的显示第几张图片      autoplayInitialDelay: 5000, // 从第几秒时,开始自动播放(默认毫秒)开始的第一次管用      autoplayPauseOnHover: true, // 鼠标移入元素内是否自动播放,为true不播放,false还自动播放      enableDrag: true    // 在移动端可以拖拽播放    });

 

实现的效果如图:

jquery.roundabout.js实现3D图片层叠旋转木马切换

需要查看demo,点击下载

更多详解请查看地址:http://demo.niutuku.com/js/20/3/

当然该插件可扩展其它更多效果,如jQuery.Roundabout.js制作图片倾斜层叠切换效果,参考地址:http://www.uedsc.com/jquery-roundabout-js.html




原标题:jquery.roundabout.js实现3D图片层叠旋转木马切换

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

Tik Tok如何快速变现?Tik Tok都有哪些变现方法?:https://www.kjdsnews.com/a/556683.html
最新趋势:海外“乔迁热”将为家居、家具市场再添一把“火”:https://www.kjdsnews.com/a/556684.html
【融资发布】川流SaaS完成种子轮融资:https://www.kjdsnews.com/a/556685.html
谁说亚马逊卷了?16岁少年亚马逊搞副业大赚200万美元:https://www.kjdsnews.com/a/556686.html
收藏:亚马逊运营的薪资制度怎么设计:https://www.kjdsnews.com/a/556687.html
UPS斥资1.38亿英镑扩建的航空枢纽正式启用:https://www.kjdsnews.com/a/556688.html
千岛湖绿城度假酒店的简介:https://www.vstour.cn/a/363185.html
深圳大湾区游轮夜景 深圳大湾区游轮夜景图:https://www.vstour.cn/a/363186.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流