Html5添加非常实用的可自动轮播的旋转木马插件教程

一、使用方法
<script src="js/jquery.min.js"></script>
<script src="js/jquery.carousel.js"></script>  
 
二、Html结构
<div class="caroursel rotator-demo">
<ul class="rotator-list">
<li class="rotator-item"><img src="image/1.jpg"></li>
<li class="rotator-item"><img src="image/2.jpg"></li>
<li class="rotator-item"><img src="image/3.jpg"></li>
</ul>
<div class="rotator-btn rotator-prev-btn"></div>
<div class="rotator-btn rotator-next-btn"></div>
</div>    

三、CSS样式
.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
}      

四、初始化插件
Caroursel.init($('.caroursel'))
                     
五、配置参数
<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:专业移动广告联盟:KeyMob是一家创办于2014年的移动广告联盟,主打Android、IOS应用交叉推广和营销广告高效的优化管理,品牌多为广告主或应用开发者,保证站长收益最大化。