首页 > 特效插件 > 滚动轮播 >  轻量级Swipe.JS手机图片轮播插件正文

轻量级Swipe.JS手机图片轮播插件

特效介绍
Swipe.js

    swipe.js是不依靠第三方插件，一个轻量级实现无缝轮播图的插件（下面的案例中的jQuery并非是依赖库，只是为了让容器全屏）。在手机下支持手指滑动切换，没有太炫酷的效果，因为手机性能的限制，这样反而更好。
使用方法
首先，引入js文件 
<script src='swipe.js'></script>
其次，按插件要求在html文件中写好结构，基础结构如下，以及基本css样式
注意：行内样式的max-width属性值可以根据自己的需要修改。如果需要角标按钮等样式，也可以按需要直接添加，添加后自己添加css样式即可： 
<style>
        .swipe {overflow: hidden;visibility: hidden;position: relative;}
        .swipe .swipe-wrap {overflow: hidden;position: relative;}
        .swipe .swipe-wrap > div { float: left; width: 100%; position: relative;}
        .swipe .swipe-wrap > div img {width: 100%;}
</style>
<div id='mySwipe' style='max-width:400px;margin:0 auto' class='swipe'>
      <div class='swipe-wrap'>
        <div><img src="img/01.jpg" alt=""></div>
        <div><img src="img/02.jpg" alt=""></div>
        <div><img src="img/03.jpg" alt=""></div>
        <div><img src="img/04.jpg" alt=""></div>
      </div>
</div>
第三，准备工作已经完成，接下来就是自己需要添加的js代码： 
var ele = document.getElementById('#mySwipe');
window.mySwipe = Swipe(ele,{
    startSlide: 0,/*开始是第几页*/
    auto: 2000,/*自动播放的时间间隔*/
    continuous: true
});
通过查看swipe.js源码，Swipe函数有两个参数，第一个是需要控制的轮播图，第二个元素就是我们传入的配置项，如果什么也不写，就会使用默认的配置项；函数Swipe的返回值是一个对象，对象中有多个方法，即mySwipe是个全局对象(因为添加到了window对象上)，同时这个对象还拥有了函数中定义的方法，可以直接通过点语法调用。

此时，轮播图已经完成。

拓展功能：

需要添加角标的话：通过callback来改变角标样式（写在配置项中） 
 callback: function(index, element) {
      //把第index个li变亮
      //把全部的变暗
      $("#mySwipe li").css("background-color","red");
     $("#mySwipe li").eq(index).css("background-color","#fff");
}
添加按钮效果，直接使用点语法调用 
$('#right_btn').on('click',function(){
    window.mySwipe.next();
});
$('#left_btn').on('click',function(){
    window.mySwipe.prev();
});
最后，常用API： 
prev()：上一页
next()：下一页
getPos()：获取当前页的索引
getNumSlides()：获取所有项的个数
slide(index, duration)：滑动方法

TAGS: Swipe.JS