首先先放出中文官方地址 http://be-fe.github.io/iSlider/index.html
这是demo
众所周知,移动端的图片滑动插件有很多,为什么我要推荐这个iSlider呢?
这个插件吸引我的有两点,
一是它不依赖与jquery,采用原生代码书写。二是它使用起来非常容易,而且除了图片,还支持普通的dom元素,滑动方式多样,效果丰富。
但是它也有些缺点,其一就是它提供的接口太少了。
在为轮播图片提供一些功能按钮时,比如说,上一张、下一张、自动播放等。使用这个插件就有些力不从心了,它本身所提供的按钮相当的死板,如果你用过,你一定会同意我说的。但是在我不死心看了它的源码后,突然有了一种山重水复疑无路,柳暗花明又一村的感觉。
我发现,源码中的iSlider对象的原型中,提供了很多的方法,这些方法可以实现我上述提到的一些功能。
我在这里详细的说明一下。首先,图片轮播的功能由iSlider这个对象来提供,在js中,我们只要创建一个iSlider对象的实例,并且将一些参数传递给它,就可以实现轮播功能。
获取到这个实例后,假设这个实例为islider,通过islider.slideIndex可以知道当前图片的序号,这个值可以作为参数。
实例中有一个方法,slideTo。这个方法接受一个数值,可以滑动到对应的序号的图片。图片的总数可以由传给iSlider的图片信息这个参数来获得。这个参数是一个数组。
这样完全可以在自定义按钮中实现一些功能。
另外,原型中还提供了pause、play等方法,通过这些方法,可以实现很多的功能。
时间: 2024-10-07 09:02:41