zoukankan      html  css  js  c++  java
  • 移动端触摸滑动插件swipe.js

    插件特色

    swipe.js是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚动间隔,返回回调函数等。经常可见使用在移动前端开发中。

    使用方法

    下面是一个比较简单的使用例子,添加适当的HTML代码和js代码即可。

    <div id='slider' class='swipe'>
      <div class='swipe-wrap'>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    window.mySwipe = Swipe(document.getElementById('slider'));
    .swipe {
      overflow: hidden;
      visibility: hidden;
      position: relative;
    }
    .swipe-wrap {
      overflow: hidden;
      position: relative;
    }
    .swipe-wrap > div {
      float:left;
      100%;
      position: relative;
    }

    设置选项

    • startSlide Integer (default:0) - 开始滚动的位置
    • speed Integer (default:300) - 动画滚动的间隔(秒数)
    • auto Integer - 开始自动幻灯片(以毫秒为单位幻灯片之间的时间)
    • continuous Boolean (default:true) - 创建一个无限的循环(当滑动到所有动画结束时是否循环滑动)
    • disableScroll Boolean (default:false) - 当滚动滚动条时是否停止幻灯片滚动
    • stopPropagation Boolean (default:false) - 是否停止事件冒泡
    • callback Function - 幻灯片运行中的回调函数
    • transitionEnd Function - 动画运行结束的回调函数

    实例

    window.mySwipe = new Swipe(document.getElementById('slider'), {
      startSlide: 2,
      speed: 400,
      auto: 3000,
      continuous: true,
      disableScroll: false,
      stopPropagation: false,
      callback: function(index, elem) {},
      transitionEnd: function(index, elem) {}
    });

    注意

    1、原始的Swipe JS,当你用点击或者手势控制了之后,轮播图就不会自动滚动了,目前sina.cn网页也是这个设计逻辑,但是有些客户不给他自动滚动心理就不舒服,解决办法是修改原swipe.js的stop函数如下:

    function stop() {
        //delay = 0;
        delay = options.auto > 0 ? options.auto : 0;
        clearTimeout(interval);
      }

    下面的演示页面就是修改后的,会一直在滚动状态。(来源

    演示和下载

    下载地址   演示地址(手机扫描下面二维码)

    swipe

  • 相关阅读:
    Java学习二十九天
    Java学习二十八天
    47. Permutations II 全排列可重复版本
    46. Permutations 全排列,无重复
    subset ii 子集 有重复元素
    339. Nested List Weight Sum 339.嵌套列表权重总和
    251. Flatten 2D Vector 平铺二维矩阵
    217. Contains Duplicate数组重复元素
    209. Minimum Size Subarray Sum 结果大于等于目标的最小长度数组
    438. Find All Anagrams in a String 查找字符串中的所有Anagrams
  • 原文地址:https://www.cnblogs.com/cyweb/p/4120847.html
Copyright © 2011-2022 走看看