长沙网站开发_swipe.js插件使用方法及扩展介绍

所属栏目：发布日期：2016-09-30 11:02浏览量：1615作者：admin

这两天在对公司官网改版时，使用到了swipe.js--一个轻量级的移动滑动组件，支持触摸移动，支持响应式页面。组件官网介绍得非常简单，这里我就介绍一下，这次使用的心得以及新增切换条。

首先简单介绍一下用法（以我实际使用为例--先来一张最终效果图）：

 

html代码

 

  

    

       >

       </li>

       </li>

    

<--增加切换条-->

       >

       </li>

       </li>

    

  

css样式

.swipe {

  overflow: hidden;

  visibility: hidden;

  position: relative;

}

.swipe-wrap {

  overflow: hidden;

  position: relative;

}

.swipe-wrap > div {

  float:left;

  width:100%;

  position: relative;

}

/*切换条样式，需要自己调整*/

.swipe-wrap>ol{

  height:22px;

  position:absolute;

  text-align:center;

  width:100%;    

}

.swipe-wrap>ol>li{

  display:inline-block;

  margin:5px;

  width:40px;

height:3px;

background-color:#fff;

    cursor: pointer;

}

.swipe-wrap>ol>li.on{

background-color:#01b4f6;

}

配置选项

Swipe可以扩展可选参数-通过设置对象的键值对:

startSlide Integer (默认:0) - Swipe开始的索引

speed Integer (默认:300) - 前进和后台的速度，单位毫秒.

auto Integer - 自动滑动 (time in milliseconds between slides)

continuous Boolean (默认:true) -是否可以循环播放

disableScroll Boolean (默认:false) - 停止触摸滑动

stopPropagation Boolean (默认:false) -停止事件传播

callback Function - 回调函数，可以获取到滑动中图片的索引.

transitionEnd Function - 在最后滑动转化时执行函数.

Swipe API:

swipe扩展了几个函数，以便于更好的通过脚本来控制滑动。

prev() 上一页

next() 下一页

getPos() 返回当前li（class='wrap'的li）的索引

getNumSlides() 返回滑块总数

slide(index, duration) 设置滑到的索引 (duration: 转化的速度，单位毫秒)

案例扩展:(js代码)

     $(function(){

        swipe = new Swipe(document.getElementById('slider'), {

          speed:300,

          auto:3000,

          callback: function(){

            var lis = $(this.element).next("ol").children();

            lis.removeClass("on").eq(this.index).addClass("on");//改变背景颜色          }

        });

//鼠标悬停时切换

        var _lis = $("#slider ol li");

        _lis.each(function(index){

          $(this).hover(function(){

            swipe.stop();//停止自动轮转

            swipe.slide(index);//跳转到指定背景图

          },function(){swipe.resume();});//恢复自动跳转

        });

      });

小结:

这次主要是新增了一个切换条，让整个页面看起来更加充实。灵活运用了swipe插件中的stop，resume以及slide(关键)函数实现了鼠标悬停在切换条上时图片跟随切换的效果，给用户更好的体验。prev和next也是非常值得推荐使用的。

swipe.js中内容相对比较简单，不到300行的代码却同样能够使用在手机端，并且支持触摸滑动，值得大家研究和使用。