利用iscroll4实现轮播图效果实例代码-百分百源码网

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

发布时间：01/14 来源：浏览：关键词：

这篇文章介绍了利用iscroll4实现轮播图效果实例代码，有兴趣的同学可以参考一下

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

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

1. A robot may not injure a human being or, through inaction, allow a human being to come to harm.

2. A robot must obey any orders given to it by human beings, except where such orders would conflict with the First Law.

3. A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.

4Zeroth Law: A robot may not harm humanity, or, by inaction, allow humanity to come to harm.

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

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

打赏