移动端图片轮播—swipe滑动插件
swipe是一个轻量级的移动滑动组件，它可以支持精确的触滑移动操作，能解决移动端对滑动的需求。
swipe插件的使用主要有四大块：
一、html
<div id='slider' class='swipe'> <div class='swipe-wrap'> <div>1</div> <div>2</div> <div>3</div> </div> </div>
1.最外层的div的id是自定义的，这个是需要传入到swipe中的
2.最外层div的class="swipe"和第二层div的class="swipe-wrap"是写死的，swipe会查找这两个样式然后做相应的处理
3.第三层的div，是滑动元素的单元。第三层div里可加内容,都是以第三层div为单元进行滑动的
二、css
.swipe { overflow: hidden; visibility: hidden; position: relative; } .swipe-wrap { overflow: hidden; position: relative; } .swipe-wrap > div { float:left; width:100%; position: relative; }
1.swipe、swipe-wrap、swipe-wrap > div，这3个是swipe里的样式是必须要用的
2.除此以外，可以对swipe-wrap > div设置一些其他样式，如居中、长、宽等
三、js
var mySwipe = new Swipe(document.getElementById('slider'), { startSlide: 4, //起始图片切换的索引位置 auto: 3000, //设置自动切换时间，单位毫秒 continuous: true, //无限循环的图片切换效果 disableScroll: true, //阻止由于触摸而滚动屏幕 stopPropagation: false, //停止滑动事件 callback: function(index, element) {}, //回调函数，切换时触发 transitionEnd: function(index, element) {} //回调函数，切换结束调用该函数 });
四、API(可选)
prev() //上一页 next() //下一页 getPos() //获取当前页的索引 getNumSlides() //获取所有项的个数 slide(index, duration) //滑动方法
API使用方法：
<button onclick="Swipe.prev()">prev</button> <button onclick="Swipe.next()">next</button>
五、优缺点
1.优点：滑动与防滑性能不错，用户体验较好；Html结构简单，自定义较灵活
2.缺点：div的高度取决于切换内容最大高度，如果某个单元div无内容，那么会出现一个空白区域；
初始化后，第一、二、三层的div宽度固定；
dom结构固定，初始化后，插件对dom绑定事件，无法在js中增加滑动的dom结构；
滑动后才会触发swipe插件的callback和transitionEnd函数。
六、demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="format-detection" content="telephone=no"> <script src="/zepto.js"></script> <script src="/swipe.js"></script> <style> .swipe { overflow: hidden; visibility: hidden; position: relative; } .swipe-wrap { overflow: hidden; position: relative; } .wrap-slide { float:left; width:100%; position: relative; display: -webkit-box; /*移动端图片居中显示*/ -webkit-box-orient: horizontal; -webkit-box-pack: center; overflow: hidden; /*图片过大时，溢出div宽的隐藏，以免影响其他图片的滑动*/ } .slide-img { height: 300px; /*固定图片高*/ } .loading { position: absolute; top: 120px; left: 150px; } .mod-load{ text-align: center; padding: 15px 0; color: @fontColor4; font-size: 12px; } @-webkit-keyframes loading{ 0%{-webkit-transform: rotate(0deg);} 50%{-webkit-transform: rotate(180deg);} 100%{-webkit-transform: rotate(360deg);} } .icon-loading{ display: inline-block; width: 15px; height: 15px; vertical-align: -4px; margin-right: 6px; transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-animation-name: loading; -webkit-animation-duration: 1.2s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-name: loading; -moz-animation-duration: 1.2s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; } .detail { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: justify; box-sizing: border-box; width: 100%; } .info { -webkit-box-flex: 1; } .title { display: -webkit-box; -webkit-box-orient: vertical; word-break: break-all; overflow: hidden; -webkit-line-clamp: 1; line-clamp: 1; } .desc { display: -webkit-box; -webkit-box-orient: vertical; word-break: break-all; overflow: hidden; -webkit-line-clamp: 3; line-clamp: 3; } .num { border-left: 1px solid #000; padding-left: 5px; max-width: 18%; text-align: center; } </style> </head> <body> <div id='slider' class='swipe'> <div class='swipe-wrap'> <div class="wrap-slide"> <img class='slide-img' data-src="http://tgi1.jia.com/115/551/15551390.jpg"></img> </div> <div class="wrap-slide"> <img class='slide-img' data-src="http://tgi1.jia.com/115/551/15551440.jpg"></img> </div> <div class="wrap-slide"> <img class='slide-img' data-src="http://tgi13.jia.com/115/551/15551388.jpg"></img> </div> </div> </div> <div class='detail'> <div class='info'> <div class='title'></div> <div class='desc'></div> </div> <div class='num'></div> </div> <script> var $img=$('.slide-img'); var $slide=$('.wrap-slide'); var $detail=$('.detail'); var $title=$('.title'); var $desc=$('.desc'); var $num=$('.num'); var windowHeight = $(window).height(); var pos=0; var imgSrc=$img[pos]; var src; var imgLoad; var imgHeight; var posHeight; var detailHeight; loading(); lazyLoad(pos); var mySwipe = new Swipe(document.getElementById('slider'), { startSlide: 0, speed: 400, continuous: false, disableScroll: false, stopPropagation: false, callback: function(index, elem) { pos = index; imgSrc = $img[pos]; if (imgSrc.hasAttribute('data-src')) { loading(); lazyLoad(pos); }else { description(pos) } }, transitionEnd: function(index, elem) {} }); //加载中... function loading(){ var loadingHtml = '<div class="loading">' + '<div class="mod-load list-loading">' + '<img class="icon-loading" src="/loading.png">' + '加载中...' + '</div></div>'; $(loadingHtml).appendTo($slide); } //图片延迟加载 function lazyLoad(pos){ src = $(imgSrc).attr('data-src'); $(imgSrc).attr('src',src).removeAttr('data-src'); imgLoad =document.querySelectorAll(".slide-img")[pos]; imgLoad.addEventListener("load",function(event){ $('.loading').remove(); description(pos); }); } //图片描述 function description(pos){ $title.html('我是标题我是标题我是标题我是标题'+pos); $desc.html('我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容'+pos); $num.html(pos); imgHeight= $img[pos].height; detailHeight = $detail.height(); posHeight =imgHeight; if(posHeight + detailHeight > windowHeight) { $detail.css({ 'top':windowHeight - detailHeight + 'px', }); }else { $detail.css({ 'top':posHeight+'px', }); } } </script> </body> </html>
图0正常显示；图1的图片宽度大于屏幕宽，居中显示，溢出隐藏；图2图片宽度小于屏幕宽度，居中显示。
