HTML5 add a very practical Carousel plugin tutorial that can be automatically carousel

I. Methods of Use
<script src= "Js/jquery.min.js" ></script>
<script src= "Js/jquery.carousel.js" ></script>

Second, HTML structure
<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>

Third, CSS style
. 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
}

Iv. Initializing Plugins
Caroursel.init ($ ('. Caroursel '))

Five, configuration parameters
<div class= "Caroursel rotator-main"
Data-setting = ' {
"width": 1000,
"Height": 270,
"Posterwidth": 640,
"Posterheight": 270,
"Scale": 0.8,
"Algin": "Middle",
"Speed": "1000",
"Isautoplay": "true",
"Dealy": "1000"
} ' >

Keymob: Professional Mobile Advertising Alliance: Keymob is a mobile advertising alliance founded in 2014, the main focus of Android, iOS application cross-promotion and marketing ads efficient optimization management, brand more for advertisers or application developers, to ensure the maximum return of the webmaster.

HTML5 add a very practical Carousel plugin tutorial that can be automatically carousel