原文链接：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. win32 socket 编程（三）——TCP/IP

    一.TCP/IP解析 TCP/IP协议的核心部分是传输层协议(TCP.UDP),网络层协议(IP)和物理接口层,这三层通常是在操作系统内核中实现.因此用户一般不涉及.编程时,编程界面有两种形式: 1. ...

  2. linux学习笔记(1):

    一.Linux系统简介 1.什么是linux Linux是一个免费的.多用户.多任务的操作系统,其运行方式.功能和UNIX系统很相似,但Linux系统的稳定性.安全性与网络功能是许多商业操作系统所无法 ...

  3. Js中className的用法

    className可以用来改变标签元素的css类选择器,从而改变元素的样式 举个栗子 一个简单的无序列表,点击button之前ul的样式为uhh1 点击button后,调用check函数中的class ...

  4. Thymeleaf简介

    Thymeleaf Thymeleaf简介 Thymeleaf是一个流行的模板引擎,该模板引擎采用Java语言开发,模板引擎是一个技术名词,是跨领域跨平台的概念,在Java语言体系下有模板引擎,在C# ...

  5. Webpack Loader种类以及执行顺序

    我们在用webpack构建项目的时候,有两种配置打包文件的方式: import或者require :a-loader!b-loader!.././static/dog.png(打包某一个文件) 配置w ...

  6. KNN算法项目实战——改进约会网站的配对效果

    KNN项目实战——改进约会网站的配对效果 1.项目背景: 海伦女士一直使用在线约会网站寻找适合自己的约会对象.尽管约会网站会推荐不同的人选,但她并不是喜欢每一个人.经过一番总结,她发现自己交往过的人可 ...

  7. Centos 7 环境下安装 RabbitMQ 3.6.10

    一.单机安装 在Centos7系统下部署(阿里云服务),使用yum安装 hostnamectl set-hostname rabbit01 #永久修改 1.1安装Erlang,因为RabbitMQ 是 ...

  8. c# 反射获取属性值 TypeUtils

    using System; using System.Collections.Generic; using System.Linq; using System.Reflection; using Sy ...

  9. mvn 打包排除test

    mvn clean package compile -Dmaven.test.skip=true

  10. mybaties数据源配置类型（POOLED、JNDI、UNPOOLED）

    dataSource的类型可以配置成其内置类型之一,如UNPOOLED.POOLED.JNDI. 如果将类型设置成UNPOOLED,mybaties会为每一个数据库操作创建一个新的连接,并关闭它.该方 ...