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