摘要:在移動端的頁面里,我們經常會有輪播圖的需求,如果不需要太多的效果,只是簡單的手指滑動和自動輪換效果的話,我比較推薦插件,不過百度搜索到的這個插件,里面介紹的不是很完整,我給大家補充下可能需要的功能。
在移動端的h5頁面里,我們經常會有輪播圖的需求,如果不需要太多的效果,只是簡單的手指滑動和自動輪換效果的話,我比較推薦swipe插件,不過百度搜索到的這個插件,里面介紹的不是很完整,我給大家補充下可能需要的功能。
swipe.js是一個輕量級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結構:
然后是樣式代碼:
.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"), { ………… ………… });
在這里只要把上面介紹的函數參數寫在里面,就可以實現相對應的功能。
最后我們也可以給滑動切換添加上下按鈕:
另外我進行一些分頁器效果的補充吧:
如果需要分頁那個點的效果的話,可以這么添加代碼:
nav標簽部分就是分頁器的相關部分拉,多少個slide就多少個li標簽(如果需要分頁器效果的童鞋就添加一個nav和ul標簽即可,因為代表分頁點的li標簽需要動態生成,如果你是動態添加的輪播模塊!)
對應的實例化代碼(有更簡化寫法的童鞋可以用自己的方法):
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 slides = document.querySelectorAll(".swipe-wrap figure").length; var liBox = document.getElementById("position"); var liTab; for (var i = 0; i < slides; i++) { liTab = document.createElement("li"); if (i == 0) { liTab.className = "on"; } liBox.appendChild(liTab); }; var bullets = document.getElementById("position").getElementsByTagName("li");
還有個關鍵的地方,這個插件在手指滑動過一次slide模塊后就會stop了,不會再自動輪播,這時候需要到swipe.js里去修改一下源碼:
這樣這個插件基本就能正常運行滿足你最基本的需求了。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/92689.html
摘要:在移動端的頁面里,我們經常會有輪播圖的需求,如果不需要太多的效果,只是簡單的手指滑動和自動輪換效果的話,我比較推薦插件,不過百度搜索到的這個插件,里面介紹的不是很完整,我給大家補充下可能需要的功能。 在移動端的h5頁面里,我們經常會有輪播圖的需求,如果不需要太多的效果,只是簡單的手指滑動和自動輪換效果的話,我比較推薦swipe插件,不過百度搜索到的這個插件,里面介紹的不是很完整,我給大...
摘要:項目背景圖片輪播是前端項目必有項,當前有很多效果很酷炫的輪播插件,例如。此處應該有掌聲,哈哈簡而言之,就是當需要一個簡單的輪播時,可以選用,自己寫一個組件。舉個栗子,就是我實現的這個基于實現分頁組件,移動端和端均適用哦。 項目背景 圖片輪播是前端項目必有項,當前有很多效果很酷炫的輪播插件,例如Swiper。但是當項目中的圖片輪播只需要一個很簡單的輪播樣式,比如這樣的showImg(ht...
摘要:為了模擬原生應用的觸控效果,大量的應用使用了手指跟隨的滑動效果,也就是用手指滑動幻燈片的效果,什么是手指跟隨如圖網上滑動插件有不少,但好像沒一個好用的不是太多,就是不靈活這里用原生實現了該功能,不僅代碼量不多,邏輯也較簡單。 為了模擬原生應用的觸控效果,大量的H5應用使用了手指跟隨的滑動效果,也就是用手指滑動幻燈片的效果, 什么是手指跟隨,如圖;showImg(https://segm...
閱讀 1897·2021-11-24 09:39
閱讀 2134·2021-09-22 15:50
閱讀 1991·2021-09-22 14:57
閱讀 699·2021-07-28 00:13
閱讀 1064·2019-08-30 15:54
閱讀 2356·2019-08-30 15:52
閱讀 2686·2019-08-30 13:07
閱讀 3787·2019-08-30 11:27