在移動web開發中，由於手機界面較小，為了能展示更多的圖片經常使用輪播圖並且還需要考慮到手機流量的問題，通過請教他人以及百度，個人感覺swipe.js比較好用。
它是一個純javascript工具，不需要跟其它js庫一起導入，同時兼容jQuery和zepto，壓縮版的大小只有6kb很適合移動端的開發，它的git地址：https://github.com/thebird/swipe
在git上對其的使用方式介紹的相當清楚，關鍵代碼如下
<div id='slider' class='swipe'>
<div class='swipe-wrap'>
<div></div>
<div></div>
<div></div>
</div>
</div>
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
window.mySwipe = Swipe(document.getElementById('slider'),opt);
其中.swipe嵌套.swipe-wrap這個html樹模型最好不要改動，至於最裡面的div可以更換其他，如li 等
僅僅只需要上訴的幾段代碼即可完成輪播圖的制作，但是在實際的項目中，特別是在首頁頂部的banner上還需要加入page的索引，還需要對控件的參數進行配置，它的主要參數配置如下：
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 - 動畫運行結束的回調函數
而他的主要api函數如下：
prev()：上一頁
next()：下一頁
getPos()：獲取當前頁的索引
getNumSlides()：獲取所有項的個數
slide(index, duration)：滑動方法
以下是偶在項目中的實際運用的代碼
<div class="banner">
<div id="slider" class="swipe">
<ul class="swipe-wrap">
<li>
<a href="javascript:void(0)">
<img src="img/1.jpg">
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/2.jpg">
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/3.jpg">
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/4.jpg">
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/5.jpg">
</a>
</li>
</ul>
<ul class="slide-trigger">
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
.banner {
width: 100%;
position: relative;
}
.banner .swipe {
overflow: hidden;
position: relative;
}
.banner .swipe-wrap {
overflow: hidden;
position: relative;
list-style: none;
}
.banner .swipe-wrap li {
float: left;
position: relative;
}
.banner img {
width: 100%;
vertical-align: middle;
}
.banner .slide-trigger {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
z-index: 10;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
list-style: none;
}
.banner .slide-trigger li {
width: 10px;
height: 10px;
background: #FFF;
margin: 5px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.banner .slide-trigger .cur {
background: #2fc7c9;
}
var slider = $('#slider');
slider.find(".slide-trigger").find("li").eq(0).addClass("cur");
window.mySwipe = new Swipe(document.getElementById('slider'), {
speed: 400,
auto: 3000,
callback: function(index, elem) {
slider.find(".slide-trigger").find("li").eq(index).addClass("cur").siblings().removeClass("cur");
}
});
zepto中的swipeUp，swipeDown不起效果
我正在看zepto，然後看到裡面一些事件的時候發現一個問題：
$(‘body').swipeUp(function(e){
alert(‘swipeUp');//偶爾有效
})
$(‘body').swipeDown(function(e){
alert(‘swipeDown');//偶爾有效
})
$(‘body').tap(function(){
alert(‘tap');//ok
})
$(‘body').swipeLeft(function(){
alert(‘swipeLeft');//ok
})
$(‘body').swipeRight(function(){
alert(‘swipeRight');//ok
})
在移動端swipeUp，swipeDown不起效果，另外幾個有效，是怎麼回事呢？
解決方案一：
zepto要引入 touch.js模塊 官網上是沒有的 去github下載 然後引入 touch.js即可
解決方案二：
是因為阻止了浏覽器默認的下拉事件，加上下面一段代碼。
document.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);