Implementation of automatic carousel rotation Trojan effect _jquery based on jquery

This article describes the jquery implementation of the automatic Carousel carousel effect. Share to everyone for your reference. Specifically as follows:
This is based on the jquery implementation of automatic Carousel Carousel Effect Code, the implementation process is very simple.
Run Effect chart:-------------------View effect Download source code-------------------

Brief tutorial
Jquery.caroursel.js is a very practical and automatic carousel of the jquery Carousel plug-in. The carousel will be stacked pictures, rotating the picture pushed to the front to show the effect of the formation of a merry-go-round.
How to use
The jquery Carousel plugin requires the introduction of jquery,jquery.carousel.js files.

<script src= "Js/jquery.min.js" ></script>
<script src= "Js/jquery.carousel.js" ></script >    

HTML structure

The jquery Carousel plug-in uses a <div> as a wrapping element, which is an unordered list for placing pictures and two <div> elements as front and rear navigation buttons.

<div class= "Caroursel rotator-demo" >
 <ul class= "rotator-list" >
 <li class= "Rotator-item" > </li>
 <li class= "Rotator-item" ></li >
 <li class= "Rotator-item" ></li>
 </ul>
 <div class= "Rotator-btn rotator-prev-btn" ></div>
 <div class= "rotator-btn rotator-next-btn" ></div >
</div>    

The number of pictures needs to be odd, otherwise the display will have some exceptions, this is a small bug in the plugin.
CSS Styles

You need to add the following necessary CSS styles for the Merry-go-round effect.

. rotator-main {
 position:relative;
 width:900px;
 height:400px
}
 
rotator-main A,. rotator-main img {display:block;
 
Rotator-main. rotator-list {
 width:900px;
 height:400px
}
 
rotator-main. rotator-list. rotator-item {
 position:absolute;
 left:0px;
 top:0px
}
 
rotator-main. rotator-btn {
 position:absolute;
 height:100%;
 width:100px;
 top:0px;
 Z-index:10;
 opacity:0
}
 
. Rotator-main. rotator-prev-btn {
 left:0px;
 Background:url (".. /image/btn_l.png ") No-repeat Center Center;
 Background-color:red
}
 
rotator-main. rotator-next-btn {
 right:0px;
 Background:url (".. /image/btn_r.png ") No-repeat Center Center;
 Background-color:red
}    

Initializing Plug-ins

After the page DOM element has been loaded, you can initialize the Carousel plug-in by using the following method.
Caroursel.init ($ ('. Caroursel '))
If you need to customize some parameters, you can set the Data-setting property in the top-level <div> element.

<div class= "Caroursel rotator-main"
  data-setting = ' {"width
  ": 1000,   //merry-go-round
  "height": 270,   //The height of the merry-go-round
  "Posterwidth": 640,//the width of the currently displayed picture
  "Posterheight": 270,//The height of the currently displayed picture
  "scale": 0.8,   Zoom value
  "Algin": "Middle",  //alignment
  "Speed": "1000",  //animation speed
  "Isautoplay": "true",//AutoPlay
  "Dealy": "1000"  //Delay Time
} ' >    

Tip: If you are not running properly in your browser, you can try switching browsing mode.
For everyone to share the jquery implementation of automatic Carousel Carousel effect code as follows

For everyone to share the jquery implementation of automatic Carousel Carousel Effect Code, I hope you can like, and apply to practice.