iscroll4實現輪播圖效果

相信不少人和我同樣，在使用iscroll的是時候只知道能夠手動滑動，不知道iscroll的輪播怎麼實現一下就是我作的一個輪播效果，親測有效；

1.html,固然能夠動態添加下面的小圓點

<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">&larr; 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 &rarr;</div>
</div>

2.css

<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>

3.js，這裏我用的jquery 作的測試，，你也能夠根據本身的喜愛選擇其餘庫

<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>

html 和css不用說，都是行家，主要是js，首先是初始化，再根據iscorll提供的API修改相應的代碼，這裏主要用刀onBeforeScrollStart，onScrollEnd，onTouchEnd這三個事件，同時結合scrollToPage（），currPageX事件進行對應的定時修改，滑動以後同步自動滾動的頁數，就ok了，其實寫這個主要是熟悉API。。。