jquery.roundabout.js實(shí)現(xiàn)3D圖片層疊旋轉(zhuǎn)木馬切換

2024-04-27 15:01:47

字體：大中小

供稿：網(wǎng)友

最近項(xiàng)目中需要實(shí)現(xiàn)3D圖片層疊旋轉(zhuǎn)木馬切換的效果，于是用到了jquery.roundabout.js。

兼容性如圖：

html結(jié)構(gòu)代碼：

<div id="featured-area">     <ul>         <li><img src="images/fnfast.jpg"/></li>        <li><img src="images/photoshop_plus.jpg"/></li>          <li><img src="images/speedometer.jpg"/></li>         <li><img src="images/photoshop_plus.jpg"/></li>      </ul>    <a href="javascr 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="js/jquery-1.11.3.min.js"></script><script type="text/javascript" src="js/jquery.roundabout-1.0.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

調(diào)用的一般形式：

$('主元素名稱(chēng)').roundabout({            duration: 600, // 運(yùn)動(dòng)速度            btn// 右按鈕            btnNext: ".ban_l_btn", // 左按鈕            autoplay: true,        // 自動(dòng)播放            autoplayDuration: 1500,// 自動(dòng)播放的時(shí)間            minOpacity: 0,         //最小的透明度            maxOpacity: 1,         //最大的透明度            reflect: true,         // 為true時(shí)是從左向右移動(dòng)，為false從右向左移動(dòng)            startingChild: 3,      // 默認(rèn)的顯示第幾張圖片            autoplayInitialDelay: 5000, // 從第幾秒時(shí)，開(kāi)始自動(dòng)播放（默認(rèn)毫秒）開(kāi)始的第一次管用            autoplayPauSEOnHover: true, // 鼠標(biāo)移入元素內(nèi)是否自動(dòng)播放，為true不播放，false還自動(dòng)播放            enableDrag: true       // 在移動(dòng)端可以拖拽播放        });