zoukankan      html  css  js  c++  java
  • 推荐一款手机端的图片滑动插件iSlider

    首先先放出中文官方地址   http://be-fe.github.io/iSlider/index.html

    这是demo

    众所周知,移动端的图片滑动插件有很多,为什么我要推荐这个iSlider呢?

    这个插件吸引我的有两点,

    一是它不依赖与jquery,采用原生代码书写。二是它使用起来非常容易,而且除了图片,还支持普通的dom元素,滑动方式多样,效果丰富。

    但是它也有些缺点,其一就是它提供的接口太少了。

    在为轮播图片提供一些功能按钮时,比如说,上一张、下一张、自动播放等。使用这个插件就有些力不从心了,它本身所提供的按钮相当的死板,如果你用过,你一定会同意我说的。但是在我不死心看了它的源码后,突然有了一种山重水复疑无路,柳暗花明又一村的感觉。

    我发现,源码中的iSlider对象的原型中,提供了很多的方法,这些方法可以实现我上述提到的一些功能。

    我在这里详细的说明一下。首先,图片轮播的功能由iSlider这个对象来提供,在js中,我们只要创建一个iSlider对象的实例,并且将一些参数传递给它,就可以实现轮播功能。

    获取到这个实例后,假设这个实例为islider,通过islider.slideIndex可以知道当前图片的序号,这个值可以作为参数。

    实例中有一个方法,slideTo。这个方法接受一个数值,可以滑动到对应的序号的图片。图片的总数可以由传给iSlider的图片信息这个参数来获得。这个参数是一个数组。

    这样完全可以在自定义按钮中实现一些功能。

    另外,原型中还提供了pause、play等方法,通过这些方法,可以实现很多的功能。

  • 相关阅读:
    互联网思维(1)
    互联网思维
    WLAN和WIFI的区别
    ping操作
    一篇关于正则表达式的小结
    javascript正则表达式
    为什么原型继承很重要 – SegmentFault
    JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型
    【转】前端开发文档规范
    我的第一篇博文
  • 原文地址:https://www.cnblogs.com/blinkcat/p/4185690.html
Copyright © 2011-2022 走看看