很詳細的web簡潔的滑動效果Swipe.JS
最近要做一個移動web的專案，前端後端都自己一人來搞。由於之前一直是做後端的開發，沒涉及過前端的開發，甚是無從下手，但又不得不去弄，於是乎，先把w3school上前端相關的html、js、css都預覽了一遍，然後在仿照別人的站點自己嘗試著去實現。
雖然很多人都是前臺很簡單，沒啥搞的（至少像我做後臺的那些同事這麼認為），但是真正開始弄起來，還是有些困難的，要做到美觀易用，更得下工夫研究裡面的所以然。
以下是我要實現一個在手機上滑動（圖片，文字等）的效果。我先是把別人的頁面下載下來，然後根據它的在頁面呈現出來的“模組”進行切割，把各個模組單獨提起出來，這樣做：（1）理解頁面的佈局；（開始的時候，在懷疑，前、後臺開發的思維模式是否不一樣，因為一開始的時候，看頁面的那些html、css、js實在暈，而且感覺程式碼也很凌亂）（2）熟悉html標籤和css、js的用法；（這個需要花費一定的時間去熟悉每個標籤的特性和用法）。
這個示例，就是我提取出來後，把原來多餘的css等刪除，僅僅保留滑動效果最簡潔的部分，由於剛接觸，在描述和理解上有不妥的地方，還煩請指正 ：）
一、先簡要說下swipe.js（參見：http://swipejs.com/）
之所以用到這個js，主要是：
（1）我在百度裡搜尋“頁面滑動”等關鍵詞時，就出現了它老人家。
（2）在我下載下來別人滑動頁面裡面也用到了它。
二、如何使用
swipe是一個純的JavaScript，裡面沒用到任何的其他的js框架（由於時間問題，裡面的東西沒很細研究，以後有時間了，再來學習），要實現移動端的滑動，必須要的元素有：
（1）html，這個當然不必說
（2）css，需要一定的css做樣式。swipe裡面會查詢關鍵標籤的樣式，根據樣式來現實
（3）js，這裡面有自己定義和實現的js function
以下分別對上面的3大塊進行描述：
（1）html。必須的html有：
<div id="slider" class="swipe" style="visibility:visible;">
<div class="swipe-wrap">
<figure>
<div>
<img src="img/1.JPG" width="100%" height="100%" />
</div>
</figure 【1】最外層的div的id是自定義的，這個是需要傳入到swipe中的
【2】最外層div的class=”swipe”和第二層div的class=”swipe-wrap”是寫死的，swipe會查詢這兩個樣式然後做相應的處理
【3】第三層的figure，就是我們要滑動元素的單元。
【4】之後我們的要滑動的內容，就是以figure為單位進行的
（2）css。必須的css有：
<style>
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > figure {
float: left;
width: 100%;
position: relative;
}
#slider {
max-width: 650px;/* 設定最大的寬度 */
margin: 0px auto; /* 居中對齊 */
}
figure {
margin: 0;/* 對齊，四周寬度都為0，在輪播的時候，以整張圖片進行移動 */
}
</style> 【1】swipe、swipe-wrap、swipe-wrap > figure，這3個是swipe必須要使用到的，而且裡面的樣式最好也不要改動（感興趣的同學可以試著去改動，看會呈現什麼效果，蠻好玩的 :)）
【2】#slider是我自己設定的，用於整個空間居中
【3】figure樣式也是自己設定的，但是是必須的，指定所有的figure對齊方式，而且只能設定為0，否則在滑動圖片的時候會出現位置的錯亂。（為什麼會錯亂，自己簡單研究了下，swipe滑動寬度的畫素是根據最外層div的寬度，如果figure的margin沒有設定為0，而有間隔時，滑動的寬度就不會是一整張的figure了（figure之間存在空虛））
（3）js。必須有的js：
<script src="js/swipe.js"></script>
<script>
var slider =
Swipe(document.getElementById('slider'), {
auto: 3000,
continuous: true,
callback: function(pos) {
}
});
</script> 這個就是呼叫swipe了，這裡面的引數有些是可有可無，根據自己的需求來選擇，簡要說明下swipe的介面引數（js裡面是這麼稱呼的麼？）：
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)：滑動方法 然後自己要實現的程式碼就可以寫在那些回撥函式中（如callback等）
三、其他
要在移動裝置上要比較好的顯示出來，除了上面的主要配置外，還需要另外一些輔助：
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<meta name="app-mobile-web-app-capable" content="yes"> 至於上面的含義，大家可百度（程式猿都用Google，但是我上不了，就只能是百度了）之。
好了，swipe就先介紹到此了，以下在附上我例項的原始碼，裡面還加了一段nav。（swipe自己去下載）
由於才第一次再csdn上寫這麼多的文字，弱弱的問下，我看到很其他的文章裡面的程式碼有顯示行數，剛在編輯的時候，到處找設定程式碼行數的地方，沒找著，這個不支援麼？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> xx的相簿 </title>
<meta name="description" content="xx的相簿">
<meta name="keywords" content="xxh,album,相簿">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<meta name="app-mobile-web-app-capable" content="yes">
</head>
<style>
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > figure {
float: left;
width: 100%;
position: relative;
}
#slider {
max-width: 650px;/* 設定最大的寬度 */
margin: 0px auto; /* 居中對齊 */
}
figure {
margin: 0;/* 對齊，四周寬度都為0，在輪播的時候，以整張圖片進行移動 */
}
div.swipe {
border: 1px solid blue;
}
.page-swipe nav #position {
text-align: center;
list-style: none;
margin: 0;
padding: 0
}
.page-swipe nav #position li {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 10px;
background: #141414;
box-shadow: inset 0 1px 3px black,0 0 1px 1px #202020;
margin: 0 2px;
cursor: pointer
}
.page-swipe nav #position li.on {
box-shadow: inset 0 1px 3px -1px #28b4ea,0 1px 2px rgba(0,0,0,.5);
background-color: #1293dc;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#1293dc),color-stop(100%,#0f6297));
background-image: -webkit-linear-gradient(top,#1293dc,#0f6297);
background-image: -moz-linear-gradient(top,#1293dc,#0f6297);
background-image: -ms-linear-gradient(top,#1293dc,#0f6297);
background-image: -o-linear-gradient(top,#1293dc,#0f6297);
background-image: linear-gradient(top,#1293dc,#0f6297)
}
</style>
<body class="page-swipe">
<div id="slider" class="swipe" style="visibility:visible;">
<div class="swipe-wrap">
<figure>
<div class="face faceInner">
<img src="img/1.JPG" width="100%" height="100%" />
</div>
</figure>
<figure>
<div class="face faceInner">
<img src="img/2.JPG" width="100%" height="100%" />
</div>
</figure>
<figure>
<div class="face faceInner">
<img src="img/3.JPG" width="100%" height="100%" />
</div>
</figure>
</div>
</div>
<nav>
<ul id="position">
<li class="on"></li>
<li class=""></li>
<li class=""></li>
</ul>
</nav>
<script src="js/swipe.js"></script>
<script>
var slider =
Swipe(document.getElementById('slider'), {
auto: 3000,
continuous: true,
callback: function(pos) {
var i = bullets.length;
while(i--){
bullets[i].className = ' ';
}
bullets[pos].className = 'on';
}
});
var bullets = document.getElementById('position').getElementsByTagName('li');
</script>
</body>
</html>