摘要:本文章介紹在移動端無縫隙輪播圖實現的原理,這個輪子比較簡單,但可以方便剛剛入門的同學參考。最終效果是在移動端無縫隙無限滑動,可以自定義輪播的速度。支持手勢左右滑動。就是小的控制點了,但移動端沒有點擊小點的功能。
本文章介紹在移動端無縫隙輪播圖實現的原理,這個輪子比較簡單,但可以方便剛剛入門的同學參考。最終效果是在移動端無縫隙無限滑動,可以自定義輪播的速度。支持手勢左右滑動。最后會放上源碼。
HTML部分
輪播圖的html就是這樣,我們配合著css來看,接下來上css。
Css部分
* { margin: 0; padding: 0; } ul { list-style: none; } .outer { margin: 0 auto; width: 100%; height: 150px; overflow: hidden; position: relative; } .inner { height: 150px; overflow: hidden; width: 8000px; } .inner .goIndex { float: left; height: 150px; background-repeat: no-repeat; background-position: center center; background-size: cover; } .num { position: absolute; left: 0; right: 0; bottom: 20%; display: flex; justify-content: center; flex-direction: row; align-items: center; } .num li { margin: 0 3px; width: 8px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, .2); } .num li.select { background: rgba(0, 0, 0, .7); }
我們通過css可以看到,.outer為最外層的殼,超出的部分都會隱藏,.inner為一個很長很長的容器,而item為單個item。結構比較簡單。ul就是小的控制點了,但移動端沒有點擊小點的功能。
頁面中Js部分
//function dGun(obj = {}) 這是dGun.js的主函數 // 初始化兩個圖片輪播 dGun({id:"oneTest",time:10000}); dGun({id:"twoTest",time:4000}); // 點擊后跳轉 var goList = document.getElementsByClassName("goIndex"); for (var i = 0; i < goList.length; i++) { goList[i].addEventListener("click", function () { window.location = this.getAttribute("goUrl") }) }
dGun()就是初始化輪播圖我們需要傳入參數,第一個參數id為.outer盒子的id,第二個為自動切換時間。下面的是簡單的點擊跳轉功能。
dGun.js 初始化部分
//function dGun(obj = {}) 包裹全部dGun內代碼 var id = obj.id; //獲取domid var time = obj.time ? parseInt(obj.time) : 3000; //默認3s time = time > 300 ? time : 1000; //間隔必須大于300 var _width = document.querySelector("#"+id).offsetWidth; //獲取輪播圖寬度 var _index = 0; //當前是第幾個輪播 從-1開始 var inner = document.querySelector("#"+id+" .inner"); //獲取輪播內容外殼(很長的那個) var items = document.querySelectorAll("#"+id+" .item"); //獲取輪播元素 // 將第一個元素復制到最后,將最后的元素復制到開頭 var firstItem = items[0]; var lastItem = items[items.length-1]; inner.insertBefore(lastItem.cloneNode(true),firstItem); inner.appendChild(firstItem.cloneNode(true)); inner.style.transform = "translateX(-"+_width+"px)"; // 生成底部小圓點 var imgLength = document.querySelector("#"+id+" .inner").children.length-2; var makeCir = ""; for (var i = 0; i < imgLength - 1; i++) { makeCir += ""; } document.querySelector("#"+id+" .num" ).innerHTML = makeCir; //設置輪播的寬度。 var newItems = document.querySelectorAll("#"+id+" .item"); for(var i = 0; i
前幾行代碼就不多介紹了,就是獲取dom,獲取寬度。
這里說一下將第一個元素復制到最后,將最后的元素復制到開頭,這是實現無縫隙的關鍵,比如我們有3張圖片1/2/3進行輪播,這樣我們就需要將dom節點變為3/1/2/3/1,為什么這樣做呢,輪播圖原理是多個item并列,我們通過translateX進行值的改變顯示不同區域,我們先將dom節點變為3/1/2/3/1,然后通過inner.style.transform = "translateX(-"+_width+"px)";這句代碼將初始化輪播顯示區域放到1這個圖片上。然后人們向右滑動,滑動到3的時候,再向右滑應該顯示1,而我們dom節點中3的右邊就是1,這樣向右滑動到末尾1的時候我們快速通過translateX移動到開頭1的位置來實現無縫隙輪播。
手勢滑動實現
var startX = 0, changedX = 0, originX = 0, basKey = 0; //手指點擊的X位置 滑動改變X的位置 inner的translateX的值 basKey是個鑰匙 function Broadcast() { var that = this; this.box = document.querySelector("#"+id+" .inner"); this.box.addEventListener("touchstart", function (ev) { that.fnStart(ev); }) } // 輪播手指按下 Broadcast.prototype.fnStart = function (ev) { clearInterval(autoPlay); //手指按下的時候清除定時輪播 if (!basKey) { var that = this; startX = ev.targetTouches[0].clientX; var tempArr = window.getComputedStyle(inner).transform.split(","); //獲取當前偏移量 if (tempArr.length > 2) { originX = parseInt(tempArr[tempArr.length - 2]) || 0; } this.box.ontouchmove = function (ev) { that.fnMove(ev) } this.box.ontouchend = function (ev) { that.fnEnd(ev) } } }; // 輪播手指移動 Broadcast.prototype.fnMove = function (ev) { ev.preventDefault(); changedX = ev.touches[0].clientX - startX; var changNum = (originX + changedX); this.box.style.cssText = "transform: translateX(" + changNum + "px);"; }; // 輪播手指抬起 Broadcast.prototype.fnEnd = function (ev) { // 移除底部按鈕樣式 document.querySelector("#"+id+" .select").classList.remove("select"); basKey = 1; setTimeout(function () { basKey = 0; }, 300) if (changedX >= 100) { //向某一方向滑動 var _end = (originX + _width); this.box.style.cssText = "transform: translateX(" + _end + "px);transition:all .3s"; _index--; if (_index == -1) { //滑動到第一個了,為了實現無縫隙,滾到最后去 document.querySelectorAll("#"+id+" .num>li")[imgLength - 1].classList.add("select"); play(-1); } } else if (changedX < -100) { //向負的某一方向滑動 var _end = (originX - _width); this.box.style.cssText = "transform: translateX(" + _end + "px);transition:all .3s"; _index++; if (_index == imgLength) { //滑到最后一個了,為了實現無縫隙,滾到前面去 play(imgLength); document.querySelectorAll("#"+id+" .num>li")[0].classList.add("select"); } } else { //滑動距離太短,沒吃飯不用管 this.box.style.cssText = "transform: translateX(" + originX + "px);transition:all .3s"; } // 完成一次滑動初始化值 startX = 0; changedX = 0; originX = 0; if (_index != -1 && _index != imgLength) { document.querySelectorAll("#"+id+" .num>li")[_index].classList.add("select"); } this.box.ontouchmove = null; //清除事件 this.box.ontouchend = null; //清除綁定事件 autoPlay = setInterval(lunbo, time) //開啟輪播 }
我們定義Broadcast方法監聽用戶的觸屏按下事件
當手指按下時,我么記錄手指按下的X軸位置,單后進行監聽移動和抬起的事件。
手指移動的時候我們要做到就是計算偏移量,并通過偏移量改變inner的位置。
手指抬起時,我們查看偏移量十分大于100,這個值可以改,也可以改一下變成傳參。通過正負判斷方向,并通過index判斷當前是第幾個,如果是滑動到我們復制的第一個和最后一個節點,則執行play函數,我們接下來講解。然后改變控制點樣式就比較簡單了,最后初始化值,并清除監聽事件。
play函數,快速滾
//首尾無縫連接 function play(index) { setTimeout(function () { inner.style.transition = "all 0s"; if (index == -1) { var _number = -imgLength * _width; inner.style.transform = "translateX(" + _number + "px)"; _index = imgLength - 1; } else if (index == imgLength) { inner.style.transform = "translateX(-" + _width + "px)"; _index = 0; } }, 250); }
原理就是在圖片滑動完成的時候,快速設置滑動變化時間設為0,并改變translateX到應該去的位置。
定時切換圖片
function lunbo(){ document.querySelector("#"+id+" .select").classList.remove("select"); var tempArr = window.getComputedStyle(inner).transform.split(","); if (tempArr.length > 2) { originX = parseInt(tempArr[tempArr.length - 2]) || 0; } var _end = (originX - _width); inner.style.cssText = "transform: translateX(" + _end + "px);transition:all .3s"; _index++; if (_index != -1 && _index != imgLength) { document.querySelectorAll("#"+id+" .num>li")[_index].classList.add("select"); }else if(_index == -1 ){ document.querySelectorAll("#"+id+" .num>li")[imgLength - 1].classList.add("select"); } else if (_index == imgLength) { play(imgLength); document.querySelectorAll("#"+id+" .num>li")[0].classList.add("select"); } } // 初始化輪播 var autoPlay = setInterval(lunbo,time); //開啟輪播 var _Broadcast = new Broadcast(); //實例觸摸
這個就是開啟個定時器,過固定的時間偏移inner的X,并根據是第幾個來判斷是否要執行play函數。
https://github.com/Zhoujiando... 源碼在這里面,大家可以看一下,萌新如果感覺有幫助麻煩點下Star 點奇數次就好。 本人剛入行不久,大神們看著不順眼的地方麻煩提提意見,謝謝。最后提前給大家拜個早年。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/53095.html
摘要:本文章介紹在移動端無縫隙輪播圖實現的原理,這個輪子比較簡單,但可以方便剛剛入門的同學參考。最終效果是在移動端無縫隙無限滑動,可以自定義輪播的速度。支持手勢左右滑動。就是小的控制點了,但移動端沒有點擊小點的功能。 本文章介紹在移動端無縫隙輪播圖實現的原理,這個輪子比較簡單,但可以方便剛剛入門的同學參考。最終效果是在移動端無縫隙無限滑動,可以自定義輪播的速度。支持手勢左右滑動。最后會放上源...
摘要:本文章介紹在移動端無縫隙輪播圖實現的原理,這個輪子比較簡單,但可以方便剛剛入門的同學參考。最終效果是在移動端無縫隙無限滑動,可以自定義輪播的速度。支持手勢左右滑動。就是小的控制點了,但移動端沒有點擊小點的功能。 本文章介紹在移動端無縫隙輪播圖實現的原理,這個輪子比較簡單,但可以方便剛剛入門的同學參考。最終效果是在移動端無縫隙無限滑動,可以自定義輪播的速度。支持手勢左右滑動。最后會放上源...
摘要:移動端輪播圖插件,在使用圖形界面插件中的組件無法實現觸摸滑動后,轉而使用插件安裝我這里安裝的是下面的這個版本使用全局導入樣式的話,我這里有用到分頁器,就在全局中引入了樣式組件引入在中使用常見的小圓點 移動端輪播圖插件,在使用iview圖形界面插件中的carousel組件無法實現觸摸滑動后,轉而使用vue-awesome-swiper插件 1.npm安裝 npm i vue-awesom...
摘要:很久沒上掘金發現草稿箱里存了好幾篇沒發的文章最近梳理下發出來往期面試官系列如何實現深克隆面試官系列的實現面試官系列前端路由的實現面試官系列基于數據劫持的雙向綁定優勢所在面試官系列你為什么使用前端框架前言設計前端組件是最能考驗開發者基本功的測 很久沒上掘金,發現草稿箱里存了好幾篇沒發的文章,最近梳理下發出來 往期 面試官系列(1): 如何實現深克隆 面試官系列(2): Event Bus...
閱讀 1402·2021-10-11 10:59
閱讀 3103·2019-08-30 15:54
閱讀 2723·2019-08-30 13:19
閱讀 2454·2019-08-30 13:02
閱讀 2370·2019-08-30 10:57
閱讀 3346·2019-08-29 15:40
閱讀 980·2019-08-29 15:39
閱讀 2299·2019-08-29 12:40