二、css代碼

body, ul, li {
 padding: 10px;
 margin: 0;
}
body {
 font-size: 12px;
 -webkit-user-select: none;
 -webkit-text-size-adjust: none;
 font-family: helvetica;
}
#wrapper {
 width:100%;
 height: 160px;
 float: left;
 position: relative; /* On older OS versions "position" and "z-index" must be defined, */
 z-index: 1;   /* it seems that recent webkit is less picky and works anyway. */
 overflow: hidden;
 background: #aaa;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -o-border-radius: 10px;
 border-radius: 10px;
 background: #e3e3e3;
}
#scroller {
 /*width: 2100px;*/
 height: 100%;
 float: left;
 padding: 0;
}
#scroller ul {
 list-style: none;
 display: block;
 float: left;
 width: 100%;
 height: 100%;
 padding: 0;
 margin: 0;
 text-align: left;
}
#scroller li {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -o-box-sizing: border-box;
 box-sizing: border-box;
 display: block;
 float: left;
 /*width: 300px;*/
 height: 160px;
 text-align: center;
 font-family: georgia;
 font-size: 18px;
 line-height: 140%;
}
#nav {
 width:100%;
 float: left;
}
#prev, #next {
 float: left;
 font-weight: bold;
 font-size: 14px;
 padding: 5px 0;
 width: 80px;
}
#next {
 float: right;
 text-align: right;
}
#indicator, #indicator > li {
 display: block;
 float: left;
 list-style: none;
 padding: 0;
 margin: 0;
}
#indicator {
 width: 110px;
 padding: 12px 0 0 30px;
}
#indicator > li {
 text-indent: -9999em;
 width: 8px;
 height: 8px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 -o-border-radius: 4px;
 border-radius: 4px;
 background: #ddd;
 overflow: hidden;
 margin-right: 4px;
}
#indicator > li.active {
 background: #888;
}
#indicator > li:last-child {
 margin: 0;
}

三、js代碼（這里我用的jquery 做的測(cè)試，你也可以根據(jù)自己的喜好選擇其他庫(kù)）

 var myScroll;
 var timer;
 var i=0;
 var obj=$('#wrapper');
 var obj_w=obj.outerWidth(true);
 var oli=obj.find('li');
 var oli_l=oli.length;
 oli.outerWidth(obj_w);
 $('#scroller').width(oli_l*obj_w);
 function loaded() {
  myScroll = new iScroll('wrapper', {
   snap: true,
   momentum: false,
   hScrollbar: false,
   onScrollEnd: function () {
    document.querySelector('#indicator > li.active').className = '';
    document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
   },
   onBeforeScrollStart:function(){
    clearInterval(timer);
    },
   onTouchEnd:function(){
    timer=setInterval(gund,2000);
    i=myScroll.currPageX
    },
   });

 timer=setInterval(gund,2000); 
 function gund(){ //每5秒滾動(dòng)
   i++;
   
   if(i==oli_l){
    i=0;
    myScroll.scrollToPage(0, 0, 1000); //滾回第一頁(yè)
   } else {
    myScroll.scrollToPage('next', 0);
   };
   document.title=i
  }; 
 
};
document.addEventListener('DOMContentLoaded', loaded, false);

html 和css不用說(shuō)，都是行家，主要是js，首先是初始化，再根據(jù)iscorll提供的API修改相應(yīng)的代碼，這里主要用刀onBeforeScrollStart，onScrollEnd，onTouchEnd這三個(gè)事件，同時(shí)結(jié)合scrollToPage（），currPageX事件進(jìn)行對(duì)應(yīng)的定時(shí)修改，滑動(dòng)之后同步自動(dòng)滾動(dòng)的頁(yè)數(shù)，就ok了，其實(shí)寫(xiě)這個(gè)主要是熟悉API。。。

上述內(nèi)容就是使用iscroll4怎么實(shí)現(xiàn)一個(gè)輪播圖效果，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。