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

  • 相关阅读:
    Hadoop工作流--ChainMapper/ChainReducer?(三)
    什么是工作流?(二)
    Hadoop工作流概念学习系列总述(一)
    Hadoop的ChainMapper和ChainReducer使用案例(链式处理)(四)
    Azkaban是什么?(一)
    爬虫概念与编程学习之如何爬取视频网站页面(三)
    爬虫概念与编程学习之如何爬取视频网站页面(用HttpClient)(二)
    爬虫概念与编程学习之如何爬取网页源代码(一)
    net命令
    arp命令
  • 原文地址:https://www.cnblogs.com/cyweb/p/4120847.html
Copyright © 2011-2022 走看看