原文链接：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 - 动画运行结束的回调函数

Swipe-移动端触摸滑动插件swipe.js的更多相关文章

  1. 移动端触摸滑动插件Swiper

    移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...

  2. swiper嵌套小demo(移动端触摸滑动插件)

    swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 :  https://github.com/Clear ...

  3. 移动端触摸滑动插件Swiper使用指南

    Swiper是一款开源.免费.功能十分强大的移动端内容触摸滑动插件,目前的最新版本是Swiper4.Swiper主要面向的是手机.平板电脑等移动设备,帮助开发者轻松实现触屏焦点图.触屏Tab切换.触屏 ...

  4. JS封装移动端触摸滑动插件应用于导航banner【精装版】

    自己封装了一个小插件,一个小尝试. 可用于类似于京东导航等效果,效果多样化,很方便. 欢迎大家提点意见. mrChenSwiper(  {parent, child, type, parentN, c ...

  5. swiper.js 移动端触摸滑动插件

    API链接: http://www.swiper.com.cn/api/start/2014/1218/140.html <body> <div class="swiper ...

  6. Swiper --移动端触摸滑动插件

    Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...

  7. 仿移动端触摸滑动插件swiper,的简单实现

    ​ /** * @author lyj * @Date 2016-02-04 * @Method 滑动方法 针对一个大容器内部的容器做滑动封装 * @param * args args.swipeDo ...

  8. 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

  9. 最好的移动触摸滑动插件：Swiper

    最近在使用的一个移动触摸滑动插件Swiper,功能很强大,跟之前的那个swipe.JS相比,同时支持在PC端滑动,支持上下方向滑动,支持多张图片滑动,支持多屏滑动,凡是你想得到的几乎都可以实现.最近作 ...

随机推荐

  1. document.body.scrollTop值为0的解决方法[转]

    做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样,       window.onscroll=function () {          ...

  2. linux命令截取文件最后n行（所有命令）

    linux命令截取文件最后n行(所有命令) tail -n a.txt > b.txt 联想:系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) una ...

  3. C# 获取系统环境数据

    using System; using System.Data; using System.Text.RegularExpressions; using System.Threading; names ...

  4. Codeforces Round #424 (Div. 2, rated, based on VK Cup Finals) - A

    题目链接:http://codeforces.com/contest/831/problem/A 题意:给定一个序列,问你这个序列是否是单峰的. 定义单峰的序列为: (序列值的变化趋势)开始是递增的, ...

  5. 简要说明 django restframework 的交互式文档

    现在为了解决前后端交互沟通的问题,不少框架都推出了相关的swage库, 用起来似乎很是友好. 正好最近在开发一个小项目,想到新项目就用新版本新技术的理念,我下载了restframework 3.7的版 ...

  6. css：鼠标点击出现有颜色的边框？如何解决

    今天遇到上图这样出现有颜色的边框 解决办法: css设置属性 outline:none;

  7. 如何使您的Wifi路由器更安全，网络安全专家告诉您！

    中国知名“黑客”教父,网络安全专家郭盛华曾说过,Wifi路由器这样设置最安全.因为无线路由器都有不同的接口,不同的设置方式以及可以调整的不同设置.在本文中,我将探讨TP-LinkArcher的界面.您 ...

  8. jmeter性能工具 之监控cpu，内存等信息（四）

    1.jmeter 本身不支持直接监控 cpu,内存等信息,需要去官网下载控件 JMeterPlugins-Standard-1.4.0.zip    解压好将其中\lib\ext\JMeterPlug ...

  9. php strspn()函数 语法

    php strspn()函数 语法 作用:返回字符串中包含某些字符的数目.大理石平台厂家 语法:strspn(string,charlist,start,length) 参数: 参数 描述 strin ...

  10. AOP说明

    小程序的开发者或者服务商会提供一些lib库,用来代理小程序的生命周期或API等,进而想要进行一些通用逻辑的处理(例如: 打点/事件触发/统一登录等等通用逻辑). 通常,小程序开发者们使用这些扩展包时, ...