利用iscroll4实现轮播图效果实例代码
前言
iscroll之所以会诞生，主要是因为无论是在以前的iphone、ipod、android或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。相信很多人和我一样，在使用iscroll的是时候只知道可以手动滑动，不知道iscroll的轮播怎么实现，那么以下就是我做的一个轮播效果，亲测有效；
一、html代码,当然可以动态添加下面的小圆点
<divid="wrapper">
<divid="scroller">
<ulid="thelist">
<li><strong>1.</strong><em>Arobotmaynotinjureahumanbeingor,throughinaction,allowahumanbeingtocometoharm.</em></li>
<li><strong>2.</strong><em>Arobotmustobeyanyordersgiventoitbyhumanbeings,exceptwheresuchorderswouldconflictwiththeFirstLaw.</em></li>
<li><strong>3.</strong><em>ArobotmustprotectitsownexistenceaslongassuchprotectiondoesnotconflictwiththeFirstorSecondLaw.</em></li>
<li><strong>4ZerothLaw:</strong><em>Arobotmaynotharmhumanity,or,byinaction,allowhumanitytocometoharm.</em></li>
</ul>
</div>
</div>
<divid="nav">
<divid="prev"onclick="myScroll.scrollToPage('prev',0);returnfalse">←prev</div>
<ulid="indicator">
<liclass="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<divid="next"onclick="myScroll.scrollToPage('next',0);returnfalse">next→</div>
</div>
二、css代码
<styletype="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;/*OnolderOSversions"position"and"z-index"mustbedefined,*/
z-index:1;/*itseemsthatrecentwebkitislesspickyandworksanyway.*/
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;
}
#scrollerul{
list-style:none;
display:block;
float:left;
width:100%;
height:100%;
padding:0;
margin:0;
text-align:left;
}
#scrollerli{
-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:5px0;
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:12px0030px;
}
#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>
三、js代码（这里我用的jquery做的测试，你也可以根据自己的喜好选择其他库）
<scriptsrc="js/jquery.js"></script>
<scriptsrc="js/iscrollc.js"></script>
<scripttype="text/javascript">
varmyScroll;
vartimer;
vari=0;
varobj=$('#wrapper');
varobj_w=obj.outerWidth(true);
varoli=obj.find('li');
varoli_l=oli.length;
oli.outerWidth(obj_w);
$('#scroller').width(oli_l*obj_w);
functionloaded(){
myScroll=newiScroll('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);
functiongund(){//每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。。。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者使用iscorll能带来一定的帮助，如果有疑问大家可以留言交流。