利用iscroll4实现轮播图效果实例代码

<div id="wrapper">
 <div id="scroller">
  <ul id="thelist">
   <li><strong>1.</strong> <em>A robot may not injure a human being or, through inaction, allow a human being to come to harm.</em></li>
   <li><strong>2.</strong> <em>A robot must obey any orders given to it by human beings, except where such orders would conflict with the First Law.</em></li>
   <li><strong>3.</strong> <em>A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.</em></li>
   <li><strong>4Zeroth Law:</strong> <em>A robot may not harm humanity, or, by inaction, allow humanity to come to harm.</em></li>
  </ul>
 </div>
</div>
<div id="nav">
 <div id="prev" onclick="myScroll.scrollToPage('prev', 0);return false">← prev</div>
 <ul id="indicator">
  <li class="active">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
 </ul>
 <div id="next" onclick="myScroll.scrollToPage('next', 0);return false">next →</div>
</div>

<style type="text/css" media="all">
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;
}
</style>

<script src="js/jquery.js"></script>
<script src="js/iscrollc.js"></script>
<script type="text/javascript">
 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秒滚动
   i++;
   
   if(i==oli_l){
    i=0;
    myScroll.scrollToPage(0, 0, 1000); //滚回第一页
   } else {
    myScroll.scrollToPage('next', 0);
   };
   document.title=i
  }; 
 
};
document.addEventListener('DOMContentLoaded', loaded, false);
</script>