Swipe-移动端触摸滑动插件swipe.js

时间：2021-02-13 14:40:51

原文链接：http://caibaojian.com/swipe.html

插件特色

viaswipe.JS是一个比较有名的触摸滑动插件，它能够处理内容滑动，支持自定义选项，你可以让它自动滚动，控制滚动间隔，返回回调函数等。经常可见使用在移动前端开发中。原文来自：http://caibaojian.com/swipe.html

使用方法

下面是一个比较简单的使用例子，添加适当的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;

  width:100%;

  position: relative;

}

实例

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) {}

});

原文链接：http://caibaojian.com/swipe.html

注意

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

function stop() {

    //delay = 0;

    delay = options.auto > 0 ? options.auto : 0;

    clearTimeout(interval);

  }

演示源代码

<!DOCTYPE HTML>

<html>

<head>

  <title>Swipe 2</title>

  <meta http-equiv="X-UA-Compatible" content="IE=8">

  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>

  <link href='style.css' rel='stylesheet'/>

  <style>

/* Swipe 2 required styles */

.swipe {

  overflow: hidden;

  visibility: hidden;

  position: relative;

  max-width: 500px;

  margin: 0 auto;

  _width:500px;

}

.swipe-wrap {

  overflow: hidden;

  position: relative;

}

.swipe-wrap div {

  float:left;

  width:100%;

  position: relative;

}

#pager em{display: inline-block; vertical-align: middle; margin:0 10px; color: #333; font-style: normal;}

#pager em.on{color: #f00;}

/* END required styles */

</style>

</head>

<body>

  <h1>Swipe 2</h1>

  <div id='mySwipe' class='swipe'>

    <div class='swipe-wrap'>

      <div> <b>1</b>

      </div>

      <div> <b>2</b>

      </div>

      <div>

        <b>3</b>

      </div>

    </div>

  </div>

  <div style='text-align:center;padding-top:20px;'>

    <div id="pager"> <em class="on">1</em> <em>2</em>

      <em>3</em>

    </div>

    <button onclick='mySwipe.prev();return false;'>prev</button>

    <button onclick='mySwipe.next();return false;'>next</button>

  </div>

<!-- <script src="jquery.js"></script>-->

<script src='swipe.js'></script>

<script>

// pure JS

// var elem = document.getElementById('mySwipe');

var mySwipe = Swipe(document.getElementById('mySwipe'), {

  // startSlide: 4,

  auto: 3000,

  // continuous: true,

  // disableScroll: true,

  // stopPropagation: true,

  callback: function(index, element) {

    slideTab(index);

  }

  // transitionEnd: function(index, element) {}

});

// function addEvent(obj,type,fn){

//     if(obj.attachEvent){

//         obj.attachEvent('on'+type,function(){

//             fn.call(this);

//         });

//     }else{

//         obj.addEventListener(type,fn,false);

//     }

// }

//点击数字导航跳转

var bullets = document.getElementById('pager').getElementsByTagName('em');

for (var i=0; i < bullets.length; i++) {

    // (function(i, bullets){

    //   addEvent(bullets[i],'click',function(){

    //     mySwipe.slide(i, 500);

    //   })

    // })(i, bullets);

  var elem = bullets[i];

  elem.setAttribute('data-tab', i);

  elem.onclick = function(){

    mySwipe.slide(parseInt(this.getAttribute('data-tab'), 10), 500);

  }

}

//高亮当前数字导航

function slideTab(index){

  var i = bullets.length;

  while (i--) {

    bullets[i].className = bullets[i].className.replace('on',' ');

  }

  bullets[index].className = 'on';

};

// with jQuery

// window.mySwipe = $('#mySwipe').Swipe().data('Swipe');

// url bar hiding

(function() {

  var win = window,

      doc = win.document;

  // If there's a hash, or addEventListener is undefined, stop here

  if ( !location.hash || !win.addEventListener ) {

    //scroll to 1

    window.scrollTo( 0, 1 );

    var scrollTop = 1,

    //reset to 0 on bodyready, if needed

    bodycheck = setInterval(function(){

      if( doc.body ){

        clearInterval( bodycheck );

        scrollTop = "scrollTop" in doc.body ? doc.body.scrollTop : 1;

        win.scrollTo( 0, scrollTop === 1 ? 0 : 1 );

      }

    }, 15 );

    if (win.addEventListener) {

      win.addEventListener("load", function(){

        setTimeout(function(){

          //reset to hide addr bar at onload

          win.scrollTo( 0, scrollTop === 1 ? 0 : 1 );

        }, 0);

      }, false );

    }

  }

})();

</script>

原文链接：http://caibaojian.com/swipe.html

设置选项

    • 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 - 动画运行结束的回调函数

相关文章