本文例項為大家分享了jquery輪播圖功能的實現程式碼，供大家參考，具體內容如下

jQuery輪播（無animation）

html佈局

<!-- 整個輪播區域 -->
  <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>
  bXGPoWu
 
  <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
</div>

css

<style>
   /* 輪播區域 */
   .container {
    w程式設計客棧idth: 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.5);
   }

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

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

jQuery

<script type="text/javascript">
   // 1. 點選按鈕左右切換頁面------輪播+動畫，滑鼠進入，播放暫停，滑鼠移出，播放繼續
   // 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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。