jQuery輪播圖功能實現(xiàn)方法

更新時間：2021年05月18日 09:04:04 作者：睡個好覺_

這篇文章主要為大家詳細介紹了jQuery輪播圖功能實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jQuery輪播圖功能的實現(xiàn)代碼，供大家參考，具體內(nèi)容如下

jQuery輪播（無animation）

html布局

<!-- 整個輪播區(qū)域 -->
  <div class="container">
   <!-- 輪播圖 -->
   <ul class="items" style="left:-200px">
   <!-- 實際上只輪播5張圖，將實際上的第一張放在最后一張，實際上的最后一張放在第一張，障眼法 -->
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>1</li>
   </ul>
   <!-- 左右翻頁按鈕 -->
   <span class="left">&lt;</span>
   <span class="right">&gt;</span>
   <!-- 圓點 -->
   <ul class="points">
    <li class="current"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
</div>

CSS

<style>
   /* 輪播區(qū)域 */
   .container {
    width: 200px;
    height: 100px;
    margin: 100px auto;
    overflow: hidden;
    position: relative;
   }

   ul {
    position: absolute;
    list-style-type: none;
    width: 1400px;
    padding: 0;
    margin: 0;
   }

   /* 輪播圖片 */
   .items li {
    width: 200px;
    height: 100px;
    margin: 0;
    padding: 0;
    float: left;
    background-color: pink;
    text-align: center;
   }
   /* 左右翻頁span */
   span {
    display: block;
    width: 20px;
    height: 30px;
    background-color: rgba(70, 130, 180, 0.3);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    line-height: 30px;
   }

   span:hover {
    cursor: pointer;
   }

   .left {
    left: 0;
   }

   .right {
    right: 0;
   }
   /* 圓點 */
   .points {
    width: 45px;
    margin: 0;
    padding: 0;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
   }

   .points li {
    float: left;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin: 1px;
    background-color: rgba(0, 0, 0, 0.5);
   }

   .points li:hover {
    background-color: rgba(255, 250, 205, 1);
   }

   .points .current {
    background-color: rgba(255, 250, 205, 1);
   }
</style>

jQuery

<script type="text/javascript">
   // 1. 點擊按鈕左右切換頁面------輪播+動畫，鼠標進入，播放暫停，鼠標移出，播放繼續(xù)
   // 2. 頁面每隔3秒自動切換
   // 3. 圓點跟著一起切換樣式

   // 左切換
   let $left = $('.left')
   // 右切換
   let $right = $('.right')
   // 圖片li
   let $list = $('.items')
   let $items = $list.children()
   // 大容器
   let $container = $('.container')
   // 圓點
   let $points = $('.points').children()
   const length = $points.length

   // 設(shè)置的總偏移量=li.width
   const itemWidth = 200
   // 設(shè)置每次動畫時間ms
   const time = 50
   // 移動次數(shù)
   const n = 20
   // list最大偏移量-(length+1)*li.width
   const long = -(length + 1) * itemWidth
   // 規(guī)定是否在翻頁，默認沒有在翻頁------>解決翻頁時點擊翻頁，出現(xiàn)位置偏差
   let moveFlag = false
   // 定時器移動的時間
   const TIME = 3000
   // 向左切換
   $left.click(function() {
    changeItem(true)
   })
   // 向右切換
   $right.click(function() {
    changeItem(false)
   })
   // 自動切換
   let timer = setInterval(function() {
    changeItem(false)
   }, TIME)
   // 鼠標進入，播放暫停，鼠標移出，播放繼續(xù)
   $container.hover(function() {
    clearInterval(timer)
   }, function() {
    timer = setInterval(function() {
     changeItem(false)
    }, TIME)
   })
   //點擊圓點翻頁
   $points.click(function() {
    //獲取當前點擊元素的index
    let index = $(this).index()
    // 跳轉(zhuǎn)到對應(yīng)的index圖
    changeItem(index)
    // 圓點其他兄弟樣式取消
    $points.eq(index).addClass('current').siblings().removeClass('current')
   })
   // 左右切換函數(shù)封裝
   function changeItem(flag) {
    // 如果當前在翻頁，直接返回
    if (moveFlag) {
     return
    }
    // 如果當前沒在翻頁，執(zhí)行代碼，且將moveFlag改為true，標識正在翻頁
    moveFlag = true
    // offset是偏移量
    let offset = 0;
    // 
    let currentLeft = parseInt($list.position().left)
    // 如果傳入的是boolean型，表示是左右平滑翻頁
    // 如果是數(shù)字型，就表示是點擊圓點翻頁
    if (typeof flag == 'boolean') {
     // 判斷是左翻還是右翻，設(shè)置相應(yīng)的位移
     offset = flag ? itemWidth : -itemWidth
    } else {
     // 點擊圓點翻頁
     // -(flag + 1)*itemWidth是目標位移，currentLeft是當前距離
     offset = -(flag + 1) * itemWidth - currentLeft
    }
    // 用來累計執(zhí)行的次數(shù)
    let i = 0
    /*
    動畫效果切換：按照次數(shù)來計算
    總距離=總偏移量=offset
    每次時間設(shè)置time
    */
    // 每次移動的距離 itemOffset
    let itemOffset = offset / n
    // 獲取現(xiàn)在的left
    // 定時器函數(shù)
    const timer = setInterval(function() {
     // 每執(zhí)行一次就加一，直到i===n，表示次數(shù)足夠就停止定時器
     i++
     currentLeft += itemOffset
     // 設(shè)置left值
     // 必須先設(shè)置值，再去判斷
     $list.css('left', currentLeft)
     if (i === n) {
      // 位移足夠，清除定時器
      clearInterval(timer)
      // 翻頁結(jié)束
      moveFlag = false
      // 圓點隨之改變
      $points.eq(Math.abs(currentLeft / itemWidth) - 1).addClass('current').siblings().removeClass('current')
      // 當定位到最后一張時，換到第二張去，視覺是輪播
      if (currentLeft == long) {
       $list.css('left', -itemWidth)
       // 圓點設(shè)置到實際的第一張圖上
       $points.eq(0).addClass('current').siblings().removeClass('current')
       // 如果已經(jīng)到達最后一張圖的墊底圖，就返回實際意義上的第一張圖
      } else if (currentLeft == 0) {
       $list.css('left', -length * itemWidth)
       // 圓點設(shè)置到實際的最后一張圖上
       $points.eq(length - 1).addClass('current').siblings().removeClass('current')
      }
     }
    }, time)
   }
</script>