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

插件特色

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的更多相关文章

移动端触摸滑动插件Swiper
移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...
swiper嵌套小demo(移动端触摸滑动插件)
swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 : https://github.com/Clear ...
移动端触摸滑动插件Swiper使用指南
Swiper是一款开源.免费.功能十分强大的移动端内容触摸滑动插件,目前的最新版本是Swiper4.Swiper主要面向的是手机.平板电脑等移动设备,帮助开发者轻松实现触屏焦点图.触屏Tab切换.触屏 ...
JS封装移动端触摸滑动插件应用于导航banner【精装版】
自己封装了一个小插件,一个小尝试. 可用于类似于京东导航等效果,效果多样化,很方便. 欢迎大家提点意见. mrChenSwiper( {parent, child, type, parentN, c ...
swiper.js 移动端触摸滑动插件
API链接: http://www.swiper.com.cn/api/start/2014/1218/140.html <body> <div class="swiper ...
Swiper --移动端触摸滑动插件
Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...
仿移动端触摸滑动插件swiper,的简单实现
/** * @author lyj * @Date 2016-02-04 * @Method 滑动方法针对一个大容器内部的容器做滑动封装 * @param * args args.swipeDo ...
自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
最好的移动触摸滑动插件：Swiper
最近在使用的一个移动触摸滑动插件Swiper,功能很强大,跟之前的那个swipe.JS相比,同时支持在PC端滑动,支持上下方向滑动,支持多张图片滑动,支持多屏滑动,凡是你想得到的几乎都可以实现.最近作 ...

随机推荐

js中的回调地狱 Callback to Hell
本文重点:解决方式:1.promise 2. 拆解 function:将各步拆解为单个的 function 3. 通过 Generator 函数暂停执行的效果方式 4. 通过ES8的异步函 ...
Spark2.0集成Hive操作的相关配置与注意事项
前言已完成安装Apache Hive,具体安装步骤请参照,Linux基于Hadoop2.8.0集群安装配置Hive2.1.1及基础操作补充说明 Hive中metastore(元数据存储)的三种方式 ...
sqli(8)
第八关:单引号GET盲注前言:感冒了很有以后摸到靶场,如若隔世....我的天,说不定又有同学要去实习了,再看看我.啧啧啧,神的飞起来.. 盲注需要掌握一些MySQL的相关函数:length(str) ...
使用BaGet来管理内部Nuget包
有的时候,我们想要制作一些nuget包,供自己内部调用,不想公开出去,那么就需要一个能够集中管理nuget包的服务了,今天我来给大家介绍一款轻便好用的包管理服务-----BaGet 下载并部署BaGe ...
通过进程id找到进程对应的容器并统计每个进程的内存占用写到excel里
# coding=utf-8 import re import os import commands import json import psutil from pyExcelerator impo ...
06Web服务
1.web开发入门 1.1 引入软件结构分类: CS结构:客户端和服务器端特点: 1)必须安装特点的客户端程序 2)服务器端升级,客户端同步升级 BS结构:浏览器和服务器端特点: 1)不需要安装 ...
读书笔记三、pandas之重新索引
python-条件判断
条件判断计算机之所以能做很多自动化的任务,因为它可以自己做条件判断. 比如,输入用户年龄,根据年龄打印不同的内容,在Python程序中,用if语句实现: age = 20 if age >= ...
python笔记（2）---不定长参数
python自定义函数中有两种不定长参数, 第一种是*name:加了星号 * 的参数会以元组(tuple)的形式导入第二种是**name:加了星号 * *的参数会以字典(dict)的形式导入 *na ...
Windows中的Work线程和GUI线程
Windows线程分为两种:Worker线程.GUI线程 worker线程:是指完全不牵扯到图形用户界面(GUI),纯粹做运算的线程. GUI线程:负责建造窗口以及处理消息循环(拥有消息队列).任何一 ...