最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
利用iscroll4实现轮播图效果实例代码
时间:2017-01-11 编辑:简简单单 来源:一聚教程网
iscroll之所以会诞生,主要是因为无论是在以前的iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。相信很多人和我一样,在使用iscroll的是时候只知道可以手动滑动,不知道iscroll的轮播怎么实现,那么以下就是我做的一个轮播效果,亲测有效;
一、html代码,当然可以动态添加下面的小圆点
|
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。。。
-
上一个: 详解js前端代码异常监控的方法
相关文章
- mybatis基本实例详解 08-03
- C语言 makefile学习及实现实例 08-01
- ps玻璃杯子制作实例 07-26
- Python编程之event对象的用法实例分析 07-20
- 详解Java CountDownLatch完成异步回调实例 07-18
- 数码单反怎么摄影 数码单反实例教程 07-13