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

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

2.案例分析

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

3.關(guān)于anime.js

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

下面我們輪播圖的實(shí)現(xiàn)就是基于這個(gè)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;
? ? ? ? ? ? /*再移動(dòng)端，如果不設(shè)置如下的樣式，則其中的元素可以拖動(dòng)*/
? ? ? ? ? ? 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.offsetWidth
? ? ? ? var focus_sort = document.querySelector('.focus_sort')

? ? ? ? // 聲明變量，用來存儲輪播圖的計(jì)數(shù)器
? ? ? ? var index = 0
? ? ? ? // 聲明變量，存儲指示器計(jì)數(shù)器
? ? ? ? var sort = 0
? ? ? ? var timer = setInterval(function () {
? ? ? ? ? ? index++

? ? ? ? ? ? var translatex = -index * focusWidth
? ? ? ? ? ? focus_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實(shí)現(xiàn)
? ? ? ? ? ? focus_sort.querySelector('.current').classList.remove('current')
? ? ? ? ? ? focus_sort.children[sort].className = 'current'
? ? ? ? }

? ? ? ? // 為focus_img 添加過渡結(jié)束事件(transitionend)，每當(dāng)過渡效果完成后
? ? ? ? // 會觸發(fā)這個(gè)事件
? ? ? ? // 如果用戶快速拖動(dòng)元素，在過渡沒有完成的情況下就再次拖動(dòng)元素，則會
? ? ? ? // 打破過渡的執(zhí)行，導(dǎo)致不會觸發(fā)這個(gè)事件
? ? ? ? focus_img.addEventListener('transitionend', function () {

? ? ? ? ? ? /*如果index==4，說明當(dāng)前輪播圖切換完成后，顯示的是最后一張圖片
? ? ? ? ? ? 而最后一張圖片與第一張圖片一樣，所以可以做如下操作：
? ? ? ? ? ? 快速的將ul拖動(dòng)到初始位置*/
? ? ? ? ? ? if (index == 4) {
? ? ? ? ? ? ? ? index = 0
? ? ? ? ? ? ? ? focus_img.style.transition = 'none'
? ? ? ? ? ? ? ? focus_img.style.transform = 'TranslateX(0px)'
? ? ? ? ? ? }
? ? ? ? ? ? else if (index < 0) {
? ? ? ? ? ? ? ? index = 3
? ? ? ? ? ? ? ? var translatex = -index * focusWidth
? ? ? ? ? ? ? ? focus_img.style.transition = 'none'
? ? ? ? ? ? ? ? focus_img.style.transform = 'TranslateX(' + translatex + 'px)'
? ? ? ? ? ? }
? ? ? ? ? ? // 將九流閥設(shè)置為true
? ? ? ? ? ? flag = true

? ? ? ? ? ? sort = index
? ? ? ? ? ? changeSort()
? ? ? ? })

? ? ? ? /* 實(shí)現(xiàn)手指拖動(dòng)實(shí)現(xiàn)輪播效果
? ? ? ? 1）手指按下，停止自動(dòng)輪播，手指離開屏幕繼續(xù)開啟自動(dòng)輪播
? ? ? ? 2）實(shí)現(xiàn)輪播圖(focus_img)隨著手指的移動(dòng)而移動(dòng)
? ? ? ? 3）手指離開屏幕后，判斷用戶手指的移動(dòng)距離，根據(jù)距離判斷是切換輪播圖還是回彈輪播圖
? ? ? ? 4）如果用戶只是按下手指，并沒有移動(dòng)，然后手指就離開屏幕，可以不執(zhí)行第三步。：如何判斷：
? ? ? ? 只要用戶移動(dòng)手指就會觸發(fā)touchmove事件，如果用戶沒有移動(dòng)手指，不會觸發(fā)這個(gè)事件
? ? ? ? */

? ? ? ? // 聲明變量，存儲手指的按下時(shí)的位置
? ? ? ? var startx = 0
? ? ? ? // 聲明變量，存儲手指的移動(dòng)距離
? ? ? ? var movex = 0
? ? ? ? // 聲明一個(gè)變量，節(jié)流閥，用于指示是否可以切換輪播圖；如果只為true：可以，值為false：不可以
? ? ? ? var flag = true
? ? ? ? // 定義變量，標(biāo)志用戶是否移動(dòng)了手指
? ? ? ? isMoove = false // false 表示沒有移動(dòng)手指
? ? ? ? focus_img.addEventListener('touchstart', function (e) {
? ? ? ? ? ? // 停止計(jì)時(shí)器
? ? ? ? ? ? clearInterval(timer)
? ? ? ? ? ? // 獲取手指按下時(shí)的位置，賦值給startx
? ? ? ? ? ? startx = e.targetTouches[0].pageX
? ? ? ? })
? ? ? ? focus_img.addEventListener('touchmove', function (e) {
? ? ? ? ? ? // 只要用戶觸發(fā)了touchmove事件，就說明用戶的手指在元素上移動(dòng)了
? ? ? ? ? ? isMoove = true
? ? ? ? ? ? if (flag) {
? ? ? ? ? ? ? ? // 獲取手指的移動(dòng)距離
? ? ? ? ? ? ? ? movex = e.targetTouches[0].pageX - startx
? ? ? ? ? ? ? ? // 計(jì)算focus_img 的新坐標(biāo)：原始位置+手指移動(dòng)距離
? ? ? ? ? ? ? ? var translatex = - index * focusWidth + movex
? ? ? ? ? ? ? ? focus_img.style.transition = 'none'
? ? ? ? ? ? ? ? this.style.transform = 'TranslateX(' + translatex + 'px)'
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? focus_img.addEventListener('touchend', function () {
? ? ? ? ? ? if (!isMoove) {
? ? ? ? ? ? ? ? return false
? ? ? ? ? ? }
? ? ? ? ? ? isMoove = false
? ? ? ? ? ? console.log(movex);
? ? ? ? ? ? if (flag) {
? ? ? ? ? ? ? ? // 將節(jié)流閥設(shè)置為false
? ? ? ? ? ? ? ? flag = false
? ? ? ? ? ? ? ? // console.log(movex);
? ? ? ? ? ? ? ? if (Math.abs(movex) >= 50) {
? ? ? ? ? ? ? ? ? ? if (movex > 0) {
? ? ? ? ? ? ? ? ? ? ? ? index--
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? index++
? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? var translatex = -index * focusWidth
? ? ? ? ? ? ? ? ? ? focus_img.style.transition = 'all 1s'
? ? ? ? ? ? ? ? ? ? this.style.transform = 'TranslateX(' + translatex + 'px)'
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? // 顯示當(dāng)前的輪播圖
? ? ? ? ? ? ? ? ? ? var translatex = -index * focusWidth
? ? ? ? ? ? ? ? ? ? focus_img.style.transition = 'all .3s'
? ? ? ? ? ? ? ? ? ? this.style.transform = 'TranslateX(' + translatex + 'px)'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }

? ? ? ? ? ? // 重新開啟自動(dòng)輪播圖
? ? ? ? ? ? clearInterval(timer)
? ? ? ? ? ? timer = setInterval(function () {
? ? ? ? ? ? ? ? index++
? ? ? ? ? ? ? ? var translatex = -index * focusWidth
? ? ? ? ? ? ? ? focus_img.style.transition = 'all 1s'
? ? ? ? ? ? ? ? focus_img.style.transform = 'TranslateX(' + translatex + 'px)'
? ? ? ? ? ? }, 3000)
? ? ? ? })

? ? </script>
</body>

</html>