利用jQuery實現(xiàn)輪播圖效果

更新時間：2021年08月25日 08:40:38 作者：別摸頭，會長不高耶！

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

今天給大家?guī)淼木褪鞘褂胘Query實現(xiàn)一個簡單的輪播圖，實現(xiàn)的原理就是：

1、在一個區(qū)域內(nèi)，設(shè)置寬高，超出這部分區(qū)域就要實現(xiàn)一個隱藏

2、獲取圖片的大小為300，索引從0開始

3、當(dāng)你點擊右邊的按鈕時候，就要實現(xiàn)你點擊的按鈕的索引加1 讓索引加一乘以圖片的大小+px

4、當(dāng)他實現(xiàn)滑動的時候，加一個animate動畫的效果，就歐了

5、右邊的效果和左邊的一樣，都是同理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>輪播圖</title>
    <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
    <style type="text/css">
     *{
      padding: 0;
      margin: 0;
     }
     .uli{
   width: 300px;
      height: 300px;
   display: flex;
   overflow: hidden;
     }
     .uli li>img{
      position: relative;
      left: 0px;
      top: 0px;
      height: 300px;
     }
     .uli li{
      width: 300px;
      height: 300px;
      list-style:none;
     }
     .a1{
      position: absolute;
      top: 100px;
      left: 0;
      cursor: pointer;
      font-size: 50px
     }
     .a2{
      position: absolute;
      top: 100px;
      left: 260px;
      cursor: pointer;
      font-size: 50px
     }
    </style>
</head>
<body>
 <!-- 設(shè)置ul li 中 圖片的數(shù)量 飲料的數(shù)量-->
    <ul class="uli">
     <li><img src="./img/大冰紅茶.png" alt=""></li>
     <li><img src="./img/大蜂蜜綠茶.png" alt=""></li>
     <li><img src="./img/大龍井綠茶.png" alt=""></li>
    </ul>
 <!-- 兩個 div 中的 span 控制右邊的便簽和左邊的標簽為點擊事件 -->
    <div class="pa1"> 
     <span class="a1"><</span>
     <span class="a2">></span>
    </div>
    <script type="text/javascript">
 // 寫一個入口函數(shù)
     $(function(){
   // 設(shè)置圖片的大小
      var img = 300;
   // 設(shè)置索引為 0 
      var index = 0;
   // 設(shè)置圖片的數(shù)量的長度
      var option = $('.uli>li img').length;
      // 左邊部分開始
      $('.a2').click(function(){
    // 再點擊事件里面執(zhí)行回調(diào)函數(shù)
                left()
      })
   // 函數(shù)名稱 lest 
      function left(){
    // index的索引值為 0 當(dāng)他小于圖片的長度的時候 就讓他執(zhí)行 ++ option要執(zhí)行減 1 否則會有一張空白的頁面
               if (index < option-1) {
                     index++
                }else {
                 index = 0
                }
                move()
      }
      // 左邊部分結(jié)束
      // 右邊部分開始
      $('.a1').click(function(){
    // 再點擊事件里面執(zhí)行回調(diào)函數(shù)
       right()
      })
      function right(){
    // index的索引值為 0 當(dāng)他大于圖片的長度的時候 就讓他執(zhí)行 -- 
       if (index > 0) {
        index--
       }else {
        index = option-1
       }
       move()
      }
   // right left函數(shù)里面都有 move 就等于你點擊你的 index 索引的時候為多少數(shù)值就會有幾個圖片滑過  500 為時間
      function move(){
               var a = -index * img + 'px'
               $('.uli li>img').animate({'left':a},500)
      }
     })
    </script>
</body>
</html>

這是以上的代碼，大家可以動手試試小案例。

效果圖讓大家一睹為快。

視頻放不出來只能看圖片了。