當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

手撸移动端轮播图（内含源码）

發(fā)布時間：2023/12/13 编程问答 42 豆豆

生活随笔收集整理的這篇文章主要介紹了手撸移动端轮播图（内含源码）小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

移動輪播圖

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

可以自動播放圖片

手指可以拖動播放輪播圖

添加指示器，但只起到指示作用，點擊不能切換圖片

不需要左右導航

因為移動端輪播圖的寬度一般與屏幕一樣寬，所以focus不設置寬度

移動端使用CSS3的方式進行圖片切換，所以可以給 focus_img 去掉定位和 left屬性

因為li標簽設置為float:left 后，就變成了行內(nèi)塊元素，其寬度由內(nèi)容決定，而其內(nèi)容圖片的寬度為520,，所以導致第四章圖片被記下來，解決方案：設置每個li標簽的寬度為ul的20%，再設置圖片的寬度與li標簽一樣狂

案例分析:

自動播放功能

開啟定時器

移動端移動，可以使用translate 移動

想要圖片優(yōu)雅的移動，請?zhí)砑舆^渡效果

自動播放功能-無縫滾動

注意，我們判斷條件是要等到圖片滾動完畢再去判斷，就是過渡完成后判斷

此時需要添加檢測過渡完成事件 transitionend

判斷條件：如果索引號等于 3 說明走到最后一張圖片，此時索引號要復原為 0

此時圖片，去掉過渡效果，然后移動

如果索引號小于0，說明是倒著走，索引號等于2

此時圖片，去掉過渡效果，然后移動

關于anime.js

Anime.js (/??n.?.me?/) 是一個輕量的JavaScript 動畫庫，擁有簡單而強大的API?？蓪?CSS 屬性、 SVG、 DOM 和JavaScript 對象進行動畫。

下面我們輪播圖的實現(xiàn)就是基于這個js插件（可以訪問官網(wǎng)下載插件）

代碼：

<!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')// 聲明變量，用來存儲輪播圖的計數(shù)器var index = 0// 聲明變量，存儲指示器計數(shù)器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實現(xiàn)focus_sort.querySelector('.current').classList.remove('current')focus_sort.children[sort].className = 'current'}// 為focus_img 添加過渡結(jié)束事件(transitionend)，每當過渡效果完成后// 會觸發(fā)這個事件// 如果用戶快速拖動元素，在過渡沒有完成的情況下就再次拖動元素，則會// 打破過渡的執(zhí)行，導致不會觸發(fā)這個事件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()})/* 實現(xiàn)手指拖動實現(xiàn)輪播效果1）手指按下，停止自動輪播，手指離開屏幕繼續(xù)開啟自動輪播2）實現(xiàn)輪播圖(focus_img)隨著手指的移動而移動3）手指離開屏幕后，判斷用戶手指的移動距離，根據(jù)距離判斷是切換輪播圖還是回彈輪播圖4）如果用戶只是按下手指，并沒有移動，然后手指就離開屏幕，可以不執(zhí)行第三步。：如何判斷：只要用戶移動手指就會觸發(fā)touchmove事件，如果用戶沒有移動手指，不會觸發(fā)這個事件*/// 聲明變量，存儲手指的按下時的位置var startx = 0// 聲明變量，存儲手指的移動距離var movex = 0// 聲明一個變量，節(jié)流閥，用于指示是否可以切換輪播圖；如果只為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) {// 只要用戶觸發(fā)了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) {// 將節(jié)流閥設置為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>

? $原創(chuàng)不易，還希望各位大佬支持一下\textcolor{blue}{原創(chuàng)不易，還希望各位大佬支持一下}$

👍 $點贊，你的認可是我創(chuàng)作的動力！\textcolor{green}{點贊，你的認可是我創(chuàng)作的動力！}$

?? $收藏，你的青睞是我努力的方向！\textcolor{green}{收藏，你的青睞是我努力的方向！}$

?? $評論，你的意見是我進步的財富！\textcolor{green}{評論，你的意見是我進步的財富！}$

總結(jié)

以上是生活随笔為你收集整理的手撸移动端轮播图（内含源码）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：一加Ace Pro内置4根n28天线：5
下一篇： react Native 环境安装配置—