http://www.jiawin.com/swipe-mobile-touch-slider/

?

想必做移動前端的同學經常會接到這樣子的一個需求，就是在移動設備頁面上的banner圖能夠用手指觸摸左右或上下的滑動切換，這在移動設備是個很常見的一個效果，其用戶體驗遠甚于點擊一個按鈕區域，通過手指的觸摸操作也是移動設備的中一個特性，我們必須專業化的處理，哈哈。其實實現原理很簡單，但平常中自己開發不是很方便。

今天就為大家帶來這樣子的一個輕量級js觸摸滑動類庫 – Swipe JS。這是一個非常小的一個javascript類庫，但他的功能卻不簡單，它可以用來展示web頁面上的任何內容，支持精確的觸摸移動操作，而且還可以設置自動播放、等比例縮放等等實用性的功能。

?

Swipe函數介紹

?

下面就為大家介紹下Swipe JS的使用方法，Swipe有以下幾個參數：

?

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)：滑動方法

?

Swipe使用方法

?

了解基本函數方法后，我們就來看看使用方法。

?

首先是HTML結構：

?

<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 > figure {float: left;width: 100%;position: relative; }

?

最后設置JS綁定以及參數設置：

?

var slider = Swipe(document.getElementById('slider'), {…………………… });

?

在這里只要把上面介紹的函數參數寫在里面，就可以實現相對應的功能。

?

最后我們也可以給滑動切換添加上下按鈕：

?

<button οnclick="Swipe.prev()">prev</button> <button οnclick="Swipe.next()">next</button>

?

到這里我們已經完成了圖片滑動的效果了，是不是非常的方便快捷呢？趕緊動手試試看吧。

?

轉載于:https://www.cnblogs.com/nc-blog/p/3998445.html

總結

以上是生活随笔為你收集整理的Swipe JS – 移动WEB页面内容触摸滑动类库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。