JavaScript+css+HTML實現移動端輪播圖（含原始碼）

1.移動輪播圖

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

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

2.案例分析

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

3.關於anime.js

Anime.js (/æn..me/) 是一個輕量的動畫庫，擁有簡單而強大的API。可對 CSS 屬性、 SVG、 DOM 和Script 物件進行動畫。

下面我們輪播圖的實現就是基於這個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="JavaScript+css+HTML實現移動端輪播圖（含原始碼）"></li>
      <li><img src="./images/focus1.webp" alt="JavaScript+css+HTML實現移動端輪播圖（含原始碼）"></li>
      <li><img src="./images/focus2.webp" alt="JavaScript+css+HTML實現移動端輪播圖（含原始碼）"></li>
      & 
lt;li><img src="./images/focus3.jpg" alt="JavaScript+css+HTML實現移動端輪播圖（含原始碼）"></li>
      <li><img src="./images/focus4.jpg" alt="JavaScript+css+HTML實現移動端輪播圖（含原始碼）"></li>
      <li><img src="./images/focus1.webp" alt="JavaScript+css+HTML實現移動端輪播圖（含原始碼）"></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-inhttp://www.cppcns.comdex="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')

    // 宣告變數，用來儲存輪播圖的計數器
    var index = 0
    // 宣告變數，儲存指示器計數器
    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實現
      focus_sort.querySelector('.current').classList.remove('current')
      focus_sort.children[sort].className = 'current'
    }

    // 為focus_img 新增過渡結束事件(transitionend)，每當過渡效果完成後
    // 會觸發這個事件
    // 如果使用者快速拖動元素，在過渡沒有完成的情況下就再次拖動元素，則會
    // 打破過渡的執行，導致不http://www.cppcns.com會觸發這個事件
    focus_img.addEventListener('transitionend',function () {

      /*如果index==4，說明當前輪播圖切換完成後，顯示的是最後一張圖片
      而最後一張圖片與第一張圖片一樣，所以可以做如下操作：
      快速的將ul拖動到初始位置*/
      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)'
      }
      // 將九流閥設定為true
      flag = true

      sort = index
      changeSort()
    })

    /* 實現手指拖動實現輪播效果
    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)
      // 獲取手指按下時的位置，賦值給startx
      startx = e.targetTouches[0].pageX
    })
    focus_img.addEventListener('touchmove',function (e) {
      // 只要使用者觸發了touchmove事件，就說明使用者的手指在元素上移動了
      isMoove = true
      if (flag) {
        // 獲取手指的移動距離
        movex = e.targetTouches[0].pageX - startx
        // 計算focwww.cppcns.comus_img 的新座標：原始位置+手指移動距離
        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) {
        // 將節流閥設定為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 {
          // 顯示當前的輪播圖
          var translatex = -index * focusWidth
          focus_img.style.transition = 'all .3s'
          this.style.transform = 'TranslateX(' + translatex + 'px)'
        }
      }

      // 重新開啟自動輪播圖
      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>

在這裡插入圖片描述

JavaScript+css+HTML實現移動端輪播圖（含原始碼）

目錄

1.移動輪播圖

2.案例分析

3.關於anime.js

JavaScript+css+HTML實現移動端輪播圖（含原始碼）

javascript實現移動端輪播圖

基於javascript實現移動端輪播圖效果

js實現移動端輪播圖滑動切換

原生JS實現pc端輪播圖效果

h5+css3+js之移動端輪播圖

JS實現橫向輪播圖（初級版）

JS實現縱向輪播圖（初級版）

JS實現橫向輪播圖（中級版）

JavaScript的無縫輪播圖（手動自動）

PC端JS輪播圖（自動+手動）

web輪播圖（定時器）

Flutter 輪播圖（基礎版）

旋轉木馬輪播圖（原生js）

JavaScript Html實現移動端紅包雨功能頁面

JavaScript實現旋轉木馬輪播圖

JS+CSS實現3D切割輪播圖

PC 端輪播圖的實現

使用純CSS實現點選輪播圖效果，無js。

JavaScript實現原型封裝輪播圖

JavaScript+css+HTML實現移動端輪播圖（含原始碼）

目錄

1.移動輪播圖

2.案例分析

3.關於anime.js

相關推薦