Swiper github網址:https://github.com/thebird/swipe
Swiper Demo演示:http://www.idangero.us/swiper/demos/
Swiper API:http://www.idangero.us/swiper/api/
這個插件的流行度很高,而且不依賴jQuery,今天我試用了一下。
它跟一般的輪播圖插件的區別在于:
一、它比一般輪播圖做的事要多很多,官方源碼里提供了高達39個demo。
二、它對移動端非常友好,比如:不依賴別的庫、自身K數很低、支持觸摸滑動。
今天的練習項目是:實現手機端H5向上滑動翻頁的效果,也就是易企秀之類的商業H5平臺提供的默認翻頁效果。
下載源碼之后找到demo文件夾,看第20個例子。
修改HTML:
html, body {
position: relative;
height: 100%;
max-width: 640px; /* 最大寬度640px,盡量適配PC瀏覽器的效果 */
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0 auto; /* 元素居中 */
padding: 0;
}