Html5添加很是實用的可自動輪播的旋轉木馬插件教程

1、使用方法
<script src="js/jquery.min.js"></script>
<script src="js/jquery.carousel.js"></script>  
 
2、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>    

3、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
}      

4、初始化插件
Caroursel.init($('.caroursel'))
                     
5、配置參數
<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應用交叉推廣和營銷廣告高效的優化管理,品牌多爲廣告主或應用開發者,保證站長收益最大化。