频道导航

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

2019-01-06 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了利用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.

二、css代码

li { display: block; float: left; list-style: none; padding: 0; margin: 0; } #indicator { width: 110px; padding: 12px 0 0 30px; } #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; }

三、js代码（这里我用的jquery 做的测试，你也可以根据自己的喜好选择其他库）

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