資訊專欄INFORMATION COLUMN
摘要：前言最近需要開發(fā)一個新的微信活動平臺，手機端主頁需要用到一個幻燈片。簡介是一個輕量級的移動滑動組件，這點從文件大小不難看出。它支持的觸摸移動，阻力以及防滑。單純從移動端來使用，應(yīng)該滿足基本的需求了。
前言
最近需要開發(fā)一個新的“微信活動平臺”，手機端主頁需要用到一個幻燈片。因為好一段時間沒有全部手寫移動端頁面了，遂又重新找了一個下有沒有什么好的幻燈片插件，畢竟重復(fù)造輪子沒有必要啊。
綜合比較后發(fā)現(xiàn)，Swipe 這款插件還是比較不錯的，所以這里特地寫一篇文章以像大家推薦，并且作為記錄，方便下次查看。
簡介Swipe 是一個輕量級的移動滑動組件，這點從文件大小不難看出。它支持 1:1 的觸摸移動，阻力以及防滑。單純從移動端來使用，應(yīng)該滿足基本的需求了。
說明從github下載后，可以發(fā)現(xiàn)，總共就8個文件，其中可能真正項目中用得到的，也基本就是1個 swipe.js 文件。
index.html 和 style.css 本身是作為演示存在的，有興趣的可以研究一下。
那么我們具體如果使用它呢？很簡單，基本只要如下代碼即可：
演示
1
2
3
以上代碼運行結(jié)果：
通過鼠標點擊或者放到手機上手指滑動，就可以看見幻燈片的運行效果了。當然，當前只是最基本的，全部都是默認配置。我們完全可以通過下面提供的參數(shù)，結(jié)合自己的需求，自義定出更好的效果來。
startSlide Integer (default:0) - index position Swipe should start at（滑動的索引值,即從*值開始滑動，默認值為0） speed Integer (default:300) - speed of prev and next transitions in milliseconds.（滑動的速度，默認值300毫秒） auto Integer - begin with auto slideshow (time in milliseconds between slides)（自動滑動，單位為毫秒） continuous Boolean (default:true) - create an infinite feel with no endpoints（是否循環(huán)滑動，默認值為true） disableScroll Boolean (default:false) - stop any touches on this container from scrolling the page（停止任何觸及此容器上滾動頁面，默認值flase） stopPropagation Boolean (default:false) - stop event propagation（停止事件傳播,默認值flase） callback Function - runs at slide change.（回調(diào)函數(shù)） transitionEnd Function - runs at the end slide transition.（滑動過渡時調(diào)用的函數(shù)）
下面就是官方給的演示例子：
window.mySwipe = new Swipe(document.getElementById("slider"), {
startSlide: 2,
speed: 400,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
});
從中我們不難看出具體參數(shù)的使用方法和位置。這一個如果感興趣，可以根據(jù)需要，自己加入?yún)?shù)試試，都是以json對象存在于Swipe的第二個參數(shù)的。
那么除了以上參數(shù)，Swipe還提供了一些常用的方法（API）:
prev() slide to prev（上一頁） next() slide to next（下一頁） getPos() returns current slide index position（獲取當前索引位置） getNumSlides() returns the total amount of slides（獲取所有滑塊總數(shù)） slide(index, duration) slide to set index position (duration: speed of transition in milliseconds)（指數(shù)，持續(xù)時間）滑動設(shè)置索引位置（持續(xù)時間：轉(zhuǎn)型速度以毫秒為單位）
都是一些簡單的接口方法，你可以Js調(diào)用他們以達到你想要的效果。
地址https://github.com/thebird/sw...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87957.html
摘要：在移動端的頁面里，我們經(jīng)常會有輪播圖的需求，如果不需要太多的效果，只是簡單的手指滑動和自動輪換效果的話，我比較推薦插件，不過百度搜索到的這個插件，里面介紹的不是很完整，我給大家補充下可能需要的功能。 在移動端的h5頁面里，我們經(jīng)常會有輪播圖的需求，如果不需要太多的效果，只是簡單的手指滑動和自動輪換效果的話，我比較推薦swipe插件，不過百度搜索到的這個插件，里面介紹的不是很完整，我給大...
摘要：在移動端的頁面里，我們經(jīng)常會有輪播圖的需求，如果不需要太多的效果，只是簡單的手指滑動和自動輪換效果的話，我比較推薦插件，不過百度搜索到的這個插件，里面介紹的不是很完整，我給大家補充下可能需要的功能。 在移動端的h5頁面里，我們經(jīng)常會有輪播圖的需求，如果不需要太多的效果，只是簡單的手指滑動和自動輪換效果的話，我比較推薦swipe插件，不過百度搜索到的這個插件，里面介紹的不是很完整，我給大...
摘要：為了模擬原生應(yīng)用的觸控效果，大量的應(yīng)用使用了手指跟隨的滑動效果，也就是用手指滑動幻燈片的效果，什么是手指跟隨如圖網(wǎng)上滑動插件有不少，但好像沒一個好用的不是太多，就是不靈活這里用原生實現(xiàn)了該功能，不僅代碼量不多，邏輯也較簡單。 為了模擬原生應(yīng)用的觸控效果，大量的H5應(yīng)用使用了手指跟隨的滑動效果，也就是用手指滑動幻燈片的效果， 什么是手指跟隨,如圖；showImg(https://segm...
摘要：項目背景圖片輪播是前端項目必有項，當前有很多效果很酷炫的輪播插件，例如。此處應(yīng)該有掌聲，哈哈簡而言之，就是當需要一個簡單的輪播時，可以選用，自己寫一個組件。舉個栗子，就是我實現(xiàn)的這個基于實現(xiàn)分頁組件，移動端和端均適用哦。 項目背景 圖片輪播是前端項目必有項，當前有很多效果很酷炫的輪播插件，例如Swiper。但是當項目中的圖片輪播只需要一個很簡單的輪播樣式，比如這樣的showImg(ht...
閱讀 1470·2021-09-03 10:29
閱讀 3483·2019-08-29 16:24
閱讀 2079·2019-08-29 11:03
閱讀 1447·2019-08-26 13:52
閱讀 2954·2019-08-26 11:36
閱讀 2816·2019-08-23 17:19
閱讀 582·2019-08-23 17:14
閱讀 838·2019-08-23 13:59
