手擼移動端輪播圖（內含源碼）

移動輪播圖

移動端輪播圖與PC段輪播圖，在技術選擇上是有區別的，因為移動端的瀏覽器版本非常好，對于H5和CSS3的支持非常完美，所以很多效果可以CSS3的方式實現，比如可以使用 Transorm 屬性替代原來的動畫函數

可以自動播放圖片
手指可以拖動播放輪播圖
添加指示器，但只起到指示作用，點擊不能切換圖片
不需要左右導航
因為移動端輪播圖的寬度一般與屏幕一樣寬，所以focus不設置寬度
移動端使用CSS3的方式進行圖片切換，所以可以給 focus_img 去掉定位和 left屬性
因為li標簽設置為float:left 后，就變成了行內塊元素，其寬度由內容決定，而其內容圖片的寬度為520,，所以導致第四章圖片被記下來，解決方案：設置每個li標簽的寬度為ul的20%，再設置圖片的寬度與li標簽一樣狂

案例分析:

自動播放功能
開啟定時器
移動端移動，可以使用translate 移動
想要圖片優雅的移動，請添加過渡效果
自動播放功能-無縫滾動
注意，我們判斷條件是要等到圖片滾動完畢再去判斷，就是過渡完成后判斷
此時需要添加檢測過渡完成事件 transitionend
判斷條件：如果索引號等于 3 說明走到最后一張圖片，此時索引號要復原為 0
此時圖片，去掉過渡效果，然后移動
如果索引號小于0，說明是倒著走，索引號等于2
此時圖片，去掉過渡效果，然后移動

關于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}{評論，你的意見是我進步的財富！}$