最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
利用iscroll4实现轮播图效果实例代码
时间:2022-06-25 14:35:15 编辑:袖梨 来源:一聚教程网
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。。。
相关文章
- 人们熟悉的寄居蟹属于以下哪种分类 神奇海洋11月21日答案 11-21
- 第五人格11.22共研服有什么更新 11月22日共研服更新内容介绍 11-21
- 原神恰斯卡怎么培养 11-21
- 无期迷途四星装束是谁 11-21
- 王者荣耀帝丹高中校服怎么获得 11-21
- 光遇姆明季后续版本怎么玩 11-21