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

发布日期:2016-09-30 07:56

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

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

 

html代码

 <div class='swipe'>

  <div class='swipe-wrap' id='slider' >

    <ul>

       <li class='wrap'></li>

       <li class='wrap'></li>

       <li class='wrap'></li>

</ul>
    <ol><--增加切换条-->

       <li class="on"></li>

       <li class=""></li>

       <li class=""></li>

    </ol>

  </div>

</div> 

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行的代码却同样能够使用在手机端,并且支持触摸滑动,值得大家研究和使用。

以上信息由长沙网站建设--长沙蒲公英网络收集与整理,禁止用于任何商业行为