swipe是一个轻量级的移动滑动组件，它可以支持精确的触滑移动操作，能解决移动端对滑动的需求。

swipe插件的使用主要有四大块：

一、html

  1. <div id='slider' class='swipe'>
  2.   <div class='swipe-wrap'>
  3.     <div>1</div>
  4.     <div>2</div>
  5.     <div>3</div>
  6.   </div>
  7. </div>

1.最外层的div的id是自定义的，这个是需要传入到swipe中的

2.最外层div的class="swipe"和第二层div的class="swipe-wrap"是写死的，swipe会查找这两个样式然后做相应的处理

3.第三层的div，是滑动元素的单元。第三层div里可加内容,都是以第三层div为单元进行滑动的

二、css

  1. .swipe {
  2.   overflow: hidden;
  3.   visibility: hidden;
  4.   position: relative;
  5. }
  6. .swipe-wrap {
  7.   overflow: hidden;
  8.   position: relative;
  9. }
  10. .swipe-wrap > div {
  11.   float:left;
  12.   width:100%;
  13.   position: relative;
  14. }

1.swipe、swipe-wrap、swipe-wrap > div，这3个是swipe里的样式是必须要用的

2.除此以外，可以对swipe-wrap > div设置一些其他样式，如居中、长、宽等

三、js

  1. var mySwipe = new Swipe(document.getElementById('slider'), {
  2.   startSlide: 4,  //起始图片切换的索引位置
  3.   auto: 3000, //设置自动切换时间，单位毫秒
  4.   continuous: true,  //无限循环的图片切换效果
  5.   disableScroll: true,  //阻止由于触摸而滚动屏幕
  6.   stopPropagation: false,  //停止滑动事件
  7.   callback: function(index, element) {},  //回调函数，切换时触发
  8.   transitionEnd: function(index, element) {}  //回调函数，切换结束调用该函数
  9. });

四、API(可选)

  1. prev() //上一页
  2. next() //下一页
  3. getPos() //获取当前页的索引
  4. getNumSlides() //获取所有项的个数
  5. slide(index, duration) //滑动方法

API使用方法：

  1. <button onclick="Swipe.prev()">prev</button>
  2. <button onclick="Swipe.next()">next</button>

五、优缺点

1.优点：滑动与防滑性能不错，用户体验较好；Html结构简单，自定义较灵活

2.缺点：div的高度取决于切换内容最大高度，如果某个单元div无内容，那么会出现一个空白区域；

初始化后，第一、二、三层的div宽度固定；

dom结构固定，初始化后，插件对dom绑定事件，无法在js中增加滑动的dom结构；

滑动后才会触发swipe插件的callback和transitionEnd函数。

六、demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <meta charset="utf-8">
  7.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  8.     <meta name="format-detection" content="telephone=no">
  9.     <script src="/zepto.js"></script>
  10.     <script src="/swipe.js"></script>
  11.     <style>
  12.         .swipe {
  13.             overflow: hidden;
  14.             visibility: hidden;
  15.             position: relative;
  16.         }
  17.         .swipe-wrap {
  18.             overflow: hidden;
  19.             position: relative;
  20.         }
  21.         .wrap-slide {
  22.             float:left;
  23.             width:100%;
  24.             position: relative;
  25.             display: -webkit-box;  /*移动端图片居中显示*/
  26.             -webkit-box-orient: horizontal;
  27.             -webkit-box-pack: center;
  28.             overflow: hidden;  /*图片过大时，溢出div宽的隐藏，以免影响其他图片的滑动*/
  29.         }
  30.         .slide-img {
  31.             height: 300px; /*固定图片高*/
  32.         }
  33.         .loading {
  34.             position: absolute;
  35.             top: 120px;
  36.             left: 150px;
  37.         }
  38.         .mod-load{
  39.             text-align: center;
  40.             padding: 15px 0;
  41.             color: @fontColor4;
  42.             font-size: 12px;
  43.         }
  44.         @-webkit-keyframes loading{
  45.             0%{-webkit-transform: rotate(0deg);}
  46.             50%{-webkit-transform: rotate(180deg);}
  47.             100%{-webkit-transform: rotate(360deg);}
  48.         }
  49.         .icon-loading{
  50.             display: inline-block;
  51.             width: 15px;
  52.             height: 15px;
  53.             vertical-align: -4px;
  54.             margin-right: 6px;
  55.             transform-style: preserve-3d;
  56.             -webkit-backface-visibility: hidden;
  57.             -webkit-animation-name: loading;
  58.             -webkit-animation-duration: 1.2s;
  59.             -webkit-animation-timing-function: linear;
  60.             -webkit-animation-iteration-count: infinite;
  61.             -moz-animation-name: loading;
  62.             -moz-animation-duration: 1.2s;
  63.             -moz-animation-timing-function: linear;
  64.             -moz-animation-iteration-count: infinite;
  65.         }
  66.         .detail {
  67.             display: -webkit-box;
  68.             -webkit-box-orient: horizontal;
  69.             -webkit-box-pack: justify;
  70.             box-sizing: border-box;
  71.             width: 100%;
  72.         }
  73.         .info {
  74.             -webkit-box-flex: 1;
  75.         }
  76.         .title {
  77.             display: -webkit-box;
  78.             -webkit-box-orient: vertical;
  79.             word-break: break-all;
  80.             overflow: hidden;
  81.             -webkit-line-clamp: 1;
  82.             line-clamp: 1;
  83.         }
  84.         .desc {
  85.             display: -webkit-box;
  86.             -webkit-box-orient: vertical;
  87.             word-break: break-all;
  88.             overflow: hidden;
  89.             -webkit-line-clamp: 3;
  90.             line-clamp: 3;
  91.         }
  92.         .num {
  93.             border-left: 1px solid #000;
  94.             padding-left: 5px;
  95.             max-width: 18%;
  96.             text-align: center;
  97.         }
  98.     </style>
  99. </head>
  100. <body>
  101. <div id='slider' class='swipe'>
  102.     <div class='swipe-wrap'>
  103.         <div class="wrap-slide">
  104.             <img class='slide-img' data-src="http://tgi1.jia.com/115/551/15551390.jpg"></img>
  105.         </div>
  106.         <div class="wrap-slide">
  107.             <img class='slide-img' data-src="http://tgi1.jia.com/115/551/15551440.jpg"></img>
  108.         </div>
  109.         <div class="wrap-slide">
  110.             <img class='slide-img' data-src="http://tgi13.jia.com/115/551/15551388.jpg"></img>
  111.         </div>
  112.     </div>
  113. </div>
  114. <div class='detail'>
  115.     <div class='info'>
  116.         <div class='title'></div>
  117.         <div class='desc'></div>
  118.     </div>
  119.     <div class='num'></div>
  120. </div>
  121. <script>
  122.     var $img=$('.slide-img');
  123.     var $slide=$('.wrap-slide');
  124.     var $detail=$('.detail');
  125.     var $title=$('.title');
  126.     var $desc=$('.desc');
  127.     var $num=$('.num');
  128.     var windowHeight = $(window).height();
  129.     var pos=0;
  130.     var imgSrc=$img[pos];
  131.     var src;
  132.     var imgLoad;
  133.     var imgHeight;
  134.     var posHeight;
  135.     var detailHeight;
  136.  
  137.     loading();
  138.     lazyLoad(pos);
  139.  
  140.     var mySwipe = new Swipe(document.getElementById('slider'), {
  141.         startSlide: 0,
  142.         speed: 400,
  143.         continuous: false,
  144.         disableScroll: false,
  145.         stopPropagation: false,
  146.         callback: function(index, elem) {
  147.             pos = index;
  148.             imgSrc = $img[pos];
  149.             if (imgSrc.hasAttribute('data-src')) {
  150.                 loading();
  151.                 lazyLoad(pos);
  152.             }else {
  153.                 description(pos)
  154.             }
  155.         },
  156.         transitionEnd: function(index, elem) {}
  157.     });
  158.  
  159.     //加载中...
  160.     function loading(){
  161.         var loadingHtml = '<div class="loading">'
  162.                 +   '<div class="mod-load list-loading">'
  163.                 +   '<img class="icon-loading" src="/loading.png">'
  164.                 +   '加载中...'
  165.                 + '</div></div>';
  166.         $(loadingHtml).appendTo($slide);
  167.     }
  168.  
  169.     //图片延迟加载
  170.     function lazyLoad(pos){
  171.         src = $(imgSrc).attr('data-src');
  172.         $(imgSrc).attr('src',src).removeAttr('data-src');
  173.         imgLoad =document.querySelectorAll(".slide-img")[pos];
  174.         imgLoad.addEventListener("load",function(event){
  175.             $('.loading').remove();
  176.             description(pos);
  177.         });
  178.     }
  179.  
  180.     //图片描述
  181.     function description(pos){
  182.         $title.html('我是标题我是标题我是标题我是标题'+pos);
  183.         $desc.html('我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容'+pos);
  184.         $num.html(pos);
  185.         imgHeight= $img[pos].height;
  186.         detailHeight = $detail.height();
  187.         posHeight =imgHeight;
  188.         if(posHeight + detailHeight > windowHeight) {
  189.             $detail.css({
  190.                 'top':windowHeight - detailHeight + 'px',
  191.             });
  192.         }else {
  193.             $detail.css({
  194.                 'top':posHeight+'px',
  195.             });
  196.         }
  197.     }
  198. </script>
  199. </body>
  200. </html>

图0正常显示；图1的图片宽度大于屏幕宽，居中显示，溢出隐藏；图2图片宽度小于屏幕宽度，居中显示。

移动端图片轮播—swipe滑动插件的更多相关文章

  1. Omi-touch实战 移动端图片轮播组件的封装

    pc端的轮播,移动端的轮播都很常见.一年前,我还为手机端没有左滑,右滑事件从而封装了一个swipe库,可以自定义超过多少滑动时间就不触发,也可以设置滑动多少距离才触发,这一个功能的代码就达到400多行 ...

  2. 移动端图片轮播效果：depth模式总结

    最近公司app改版首页增加了一处轮播图效果,但是跟普通的轮播效果不同,是类似于下图的样式,找了一些兼容移动端的插件以及jQuery源码,总结一下使用心得: 1:jquery源码:缺点是在手机端的滑动很 ...

  3. 让boostrap的图片轮播支持滑动效果

    因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果. 然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有 ...

  4. 图片轮播器——jquery插件

    下载:http://files.cnblogs.com/files/wordblog/jiaoben828.rar

  5. jquery图片轮播插件slideBox

    效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...

  6. JQuery slidebox实现图片轮播

    jQuery图片轮播(焦点图)插件jquery.slideBox,简单设置下参数就可以多个多种动画效果,左右,上下,速度,还可指定默认显示第N张,点击的按钮在现代浏览中可以实现圆形或圆角效果,插件代码 ...

  7. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  8. 非常优秀的swiper插件————幻灯片播放、图片轮播

    http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...

  9. 实现一个3D图片轮播插件 —— 更新版

    前言:     前段时间写下了之前那篇 3D图片轮播效果,后来发现了 Pedro Botelho 写的jquery.gallery.js ,于是重新修改了自己的这个图片轮播,使之可以成为一个插件来使用 ...

随机推荐

  1. NO.2：自学tensorflow之路------BP神经网络编程

    引言 在上一篇博客中,介绍了各种Python的第三方库的安装,本周将要使用Tensorflow完成第一个神经网络,BP神经网络的编写.由于之前已经介绍过了BP神经网络的内部结构,本文将直接介绍Tens ...

  2. Java 内存模型_1

    title: Java 内存模型_1 date: 2017-01-15 17:11:02 tags: [JMM] categories: [Programming,Java] --- 概述 本文记录 ...

  3. eject命令详解

    基础命令学习目录首页 原文链接:http://www.kgc.cn/bbs/post/128680.shtml Linux eject命令用于退出抽取式设备. 若设备已挂入,则eject会先将该设备卸 ...

  4. 详解HTTP缓存

    HTTP缓存是个大公司面试几乎必考的问题,写篇随笔说一下HTTP缓存. 1. HTTP报文首部中有关缓存的字段 在HTTP报文中,与缓存相关的信息都存在首部里,简单说一下首部. 首部 HTTP首部字段 ...

  5. 欢迎来怼--第二十九次Scrum会议

    一.小组信息 队名:欢迎来怼 小组成员 队长:田继平 成员:李圆圆,葛美义,王伟东,姜珊,邵朔,阚博文 小组照片 二.开会信息 时间:2017/11/17 15:55~16:25,总计30min. 地 ...

  6. （第十周）新NABCD

    项目名:食物链教学工具 组名:奋斗吧兄弟 组长:黄兴 组员:李俞寰.杜桥.栾骄阳.王东涵 新的NABCD模型: Need:可以辅助教师课堂讲授食物链相关的知识.软件的界面要漂亮,操作要简单,要给出软件 ...

  7. No.1000_第五次团队会议

    光辉的一夜 今夜注定是不平凡的一夜.是崔强同学伟大的一夜. 昨天因为实验室项目,我刚上完编译课就被学院叫走去做项目,当时我就很无奈,因为说好了要和崔强一起实现下午的前端,他写界面我写底层逻辑,这样我们 ...

  8. java实验1实验报告(20135232王玥)

    实验一 Java开发环境的熟悉 一.实验内容 1. 使用JDK编译.运行简单的Java程序 2.使用Eclipse 编辑.编译.运行.调试Java程序 二.实验要求 1.没有Linux基础的同学建议先 ...

  9. Servlet以流的形式返回图片

    代码: import java.awt.image.BufferedImage; import java.io.File; import java.io.FileInputStream; import ...

  10. Leetcode题库——35.搜索插入位置

    @author: ZZQ @software: PyCharm @file: searchInsert.py @time: 2018/11/07 19:20 要求:给定一个排序数组和一个目标值,在数组 ...