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

iscroll之所以会诞生，主要是因为无论是在以前的iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。相信很多人和我一样，在使用iscroll的是时候只知道可以手动滑动，不知道iscroll的轮播怎么实现，那么以下就是我做的一个轮播效果，亲测有效；

一、html代码,当然可以动态添加下面的小圆点

css" media="all" li="" padding:="" margin:="" body="" font-size:="" a="" href="/tags.php/select/" target="_blank" :="" -webkit-text-size-adjust:="" font-family:="" wrapper="" height:="" float:="" position:="" on="" older="" os="" versions="" and="" must="" be="" z-index:="" it="" seems="" that="" recent="" webkit="" is="" less="" picky="" works="" anyway.="" overflow:="" background:="" -webkit-border-radius:="" -o-border-radius:="" border-radius:="" scroller="" width:="" ul="" list-style:="" display:="" text-align:="" -webkit-box-sizing:="" -o-box-sizing:="" box-sizing:="" line-height:="" nav="" font-weight:="" 5px="" indicator="" 12px="" text-indent:="" margin-right:="" li.active="" li:last-child="" jquery="" scriptsrc="js/iscrollc.js" scripttype="text/

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

html 和css不用说，都是行家，主要是js，首先是初始化，再根据iscorll提供的API修改相应的代码，这里主要用刀onBeforeScrollStart，onScrollEnd，onTouchEnd这三个事件，同时结合scrollToPage（），currPageX事件进行对应的定时修改，滑动之后同步自动滚动的页数，就ok了，其实写这个主要是熟悉API。。。