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端滑动,支持上下方向滑动,支持多张图片滑动,支持多屏滑动,凡是你想得到的几乎都可以实现.最近作 ...

随机推荐

Thymeleaf简介
Thymeleaf Thymeleaf简介 Thymeleaf是一个流行的模板引擎,该模板引擎采用Java语言开发,模板引擎是一个技术名词,是跨领域跨平台的概念,在Java语言体系下有模板引擎,在C# ...
vue.js（17）--vue的组件切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
nginx报错[error] CreateFile() "D:\Java-windows\nginx-1.16.0/logs/nginx.pid" failed (2: The system cannot find the file specified)
无论是nginx -s stop还是nginx -s reload命令,都会出现这个错误. 解决方法:使用命令创建/logs/nginx.pid文件,命令如下所示: nginx -c conf/ngi ...
JSON.stringify常见用法
转摘于其他博客 var data =[ { name: "金",sex:"1",age:26 }, { name: "才",sex:&quo ...
django之模型类在视图中的应用
一:模型类直接从把前端表单传入的值,进行存储. @csrf_exempt def regist(request): if request.method == 'POST': form = UserFo ...
python实现Restful服务 (基于flask)(1)
参考:https://www.jianshu.com/p/6ac1cab17929 参考:https://www.cnblogs.com/alexyuyu/p/6243362.html 参考:http ...
Selenium-WebDriverApi介绍
浏览器操作: #刷新 driver.refresh() from selenium import webdriver driver=webdriver.Chrome() driver.get('htt ...
spring boot整合quartz定时任务案例
1.运行环境开发工具:intellij idea JDK版本:1.8 项目管理工具:Maven 4.0.0 2.GITHUB地址 https://github.com/nbfujx/springBo ...
状态管理Vuex的使用总结
1.Vuex.store 的基本使用 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. Vu ...
maven构建docker镜像异常
由于没有配置ip+2375端口,导致每次跑的时候,都是连接本地的,一直会报错 [ERROR] Failed to execute goal com.spotify:docker-maven-plugi ...