Jquery. roundabout. js implements switching of 3D image stacked carousel,
Recently, jquery. roundabout. js was used to implement switching of 3D image stacked carousel.
Compatibility
Html Structure Code:
<div id="featured-area"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> <a href="javascript:void(0)" class="ban_l_btn"></a> <a href="javascript:void(0)" class="ban_r_btn"></a></div>
Css style:
#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%;}
Introduced 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>
The general form of the call:
$ ('Primary element name '). roundabout ({duration: 600, // motion speed btnPrev :". ban_r_btn ", // the right button btnNext :". ban_l_btn ", // The left button autoplay: true, // autoplayDuration: 1500, // minOpacity: 0, // minimum transparency maxOpacity: 1, // maximum transparency reflect: true, // if it is true, it is to move from left to right. If it is false, it is to move startingChild: 3 from right to left, // The default number of autoplayInitialDelay: 5000. // autoplayPauseOnHover: true is used for the first time when automatic playback starts (in milliseconds by default, // whether to play the video automatically when you move the cursor into the element. If this parameter is set to true, enableDrag is automatically played. If the parameter is set to false, enableDrag is automatically played. // you can drag and drop the video on the mobile terminal to play the video });
Implementation Effect
To view the demo, click to download
For more details, see the address:Http://demo.niutuku.com/js/20/3/
Of course, this plug-in can expand other effects, suchJQuery. Roundabout. js made picture tilt stacked switching effect, reference address: http://www.uedsc.com/jquery-roundabout-js.html