手撸移动端轮播图（内含源码）
生活随笔
收集整理的這篇文章主要介紹了
手撸移动端轮播图（内含源码）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
移動輪播圖
移動端輪播圖與PC段輪播圖，在技術選擇上是有區別的，因為移動端的瀏覽器版本非常好，對于H5和CSS3的支持非常完美，所以很多效果可以CSS3的方式實現，比如可以使用 Transorm 屬性替代原來的動畫函數
案例分析:
關于anime.js
Anime.js (/??n.?.me?/) 是一個輕量的JavaScript 動畫庫， 擁有簡單而強大的API。可對 CSS 屬性、 SVG、 DOM 和JavaScript 對象進行動畫。
下面我們輪播圖的實現就是基于這個js插件（可以訪問官網下載插件）
代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>輪播圖</title><style>* {margin: 0;padding: 0;}ul {list-style-type: none;}.focus {position: relative;/*再移動端，如果不設置如下的樣式，則其中的元素可以拖動*/overflow: hidden;}ul.focus_img {width: 600%;margin-left: -100%;/* 以iphone6 為例 375*5 */}.focus_img li {/* border: 1px solid black; */float: left;width: 16.666%;/*375*6*0.2*/}.focus_img img {width: 100%;/*375*6*0.2*/}.focus_sort {position: absolute;right: 20px;bottom: 20px;border-radius: 5px;/* border: 1px solid black; */}.focus_sort li {display: inline-block;width: 20px;height: 10px;background-color: #fff;margin-right: 10px;cursor: pointer;}.focus_sort .current {background-color: red;}</style></head><body><div class="focus"><!--輪播圖片--><ul class="focus_img"><li><img src="./images/focus4.jpg" alt=""></li><li><img src="./images/focus1.webp" alt=""></li><li><img src="./images/focus2.webp" alt=""></li><li><img src="./images/focus3.jpg" alt=""></li><li><img src="./images/focus4.jpg" alt=""></li><li><img src="./images/focus1.webp" alt=""></li></ul><ul class="focus_sort"><li class="current" data-index="0"></li><li data-index="1"></li><li data-index="2"></li><li data-index="3"></li></ul></div><script>var focus_img = document.querySelector('.focus_img')var focus = document.querySelector('.focus')var focusWidth = focus.offsetWidthvar focus_sort = document.querySelector('.focus_sort')// 聲明變量，用來存儲輪播圖的計數器var index = 0// 聲明變量，存儲指示器計數器var sort = 0var timer = setInterval(function () {index++var translatex = -index * focusWidthfocus_img.style.transition = 'all 1s'focus_img.style.transform = 'TranslateX(' + translatex + 'px)'// 指示器切換changeSort()}, 3000)// 切換指示器function changeSort() {// for (var i = 0; i < focus_sort.children.length; i++) {// focus_sort.children[i].className = ''// }// 將上面的代碼替換成使用classList實現focus_sort.querySelector('.current').classList.remove('current')focus_sort.children[sort].className = 'current'}// 為focus_img 添加過渡結束事件(transitionend)，每當過渡效果完成后// 會觸發這個事件// 如果用戶快速拖動元素，在過渡沒有完成的情況下就再次拖動元素，則會// 打破過渡的執行，導致不會觸發這個事件focus_img.addEventListener('transitionend', function () {/*如果index==4，說明當前輪播圖切換完成后，顯示的是最后一張圖片而最后一張圖片與第一張圖片一樣，所以可以做如下操作：快速的將ul拖動到初始位置*/if (index == 4) {index = 0focus_img.style.transition = 'none'focus_img.style.transform = 'TranslateX(0px)'}else if (index < 0) {index = 3var translatex = -index * focusWidthfocus_img.style.transition = 'none'focus_img.style.transform = 'TranslateX(' + translatex + 'px)'}// 將九流閥設置為trueflag = truesort = indexchangeSort()})/* 實現手指拖動實現輪播效果1）手指按下，停止自動輪播，手指離開屏幕繼續開啟自動輪播2）實現輪播圖(focus_img)隨著手指的移動而移動3）手指離開屏幕后，判斷用戶手指的移動距離，根據距離判斷是切換輪播圖還是回彈輪播圖4）如果用戶只是按下手指，并沒有移動，然后手指就離開屏幕，可以不執行第三步。：如何判斷：只要用戶移動手指就會觸發touchmove事件，如果用戶沒有移動手指，不會觸發這個事件*/// 聲明變量，存儲手指的按下時的位置var startx = 0// 聲明變量，存儲手指的移動距離var movex = 0// 聲明一個變量，節流閥，用于指示是否可以切換輪播圖；如果只為true：可以，值為false：不可以var flag = true// 定義變量，標志用戶是否移動了手指isMoove = false // false 表示沒有移動手指focus_img.addEventListener('touchstart', function (e) {// 停止計時器clearInterval(timer)// 獲取手指按下時的位置，賦值給startxstartx = e.targetTouches[0].pageX})focus_img.addEventListener('touchmove', function (e) {// 只要用戶觸發了touchmove事件，就說明用戶的手指在元素上移動了isMoove = trueif (flag) {// 獲取手指的移動距離movex = e.targetTouches[0].pageX - startx// 計算focus_img 的新坐標：原始位置+手指移動距離var translatex = - index * focusWidth + movexfocus_img.style.transition = 'none'this.style.transform = 'TranslateX(' + translatex + 'px)'}})focus_img.addEventListener('touchend', function () {if (!isMoove) {return false}isMoove = falseconsole.log(movex);if (flag) {// 將節流閥設置為falseflag = false// console.log(movex);if (Math.abs(movex) >= 50) {if (movex > 0) {index--} else {index++}var translatex = -index * focusWidthfocus_img.style.transition = 'all 1s'this.style.transform = 'TranslateX(' + translatex + 'px)'} else {// 顯示當前的輪播圖var translatex = -index * focusWidthfocus_img.style.transition = 'all .3s'this.style.transform = 'TranslateX(' + translatex + 'px)'}}// 重新開啟自動輪播圖clearInterval(timer)timer = setInterval(function () {index++var translatex = -index * focusWidthfocus_img.style.transition = 'all 1s'focus_img.style.transform = 'TranslateX(' + translatex + 'px)'}, 3000)})</script> </body></html>?原創不易，還希望各位大佬支持一下\textcolor{blue}{原創不易，還希望各位大佬支持一下}原創不易，還希望各位大佬支持一下
👍 點贊，你的認可是我創作的動力！\textcolor{green}{點贊，你的認可是我創作的動力！}點贊，你的認可是我創作的動力！
?? 收藏，你的青睞是我努力的方向！\textcolor{green}{收藏，你的青睞是我努力的方向！}收藏，你的青睞是我努力的方向！
?? 評論，你的意見是我進步的財富！\textcolor{green}{評論，你的意見是我進步的財富！}評論，你的意見是我進步的財富！
總結
以上是生活随笔為你收集整理的手撸移动端轮播图（内含源码）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一加Ace Pro内置4根n28天线：5
- 下一篇： 官宣：杨幂成美团外卖代言人