利用jQuery實現輪播圖效果

Posted on by

今天給大傢帶來的就是使用jQuery實現一個簡單的輪播圖，實現的原理就是：

1、在一個區域內，設置寬高，超出這部分區域就要實現一個隱藏

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

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

4、當他實現滑動的時候，加一個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>
 <!-- 設置ul li 中 圖片的數量 飲料的數量-->
    <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">
 // 寫一個入口函數
     $(function(){
   // 設置圖片的大小
      var img = 300;
   // 設置索引為 0 
      var index = 0;
   // 設置圖片的數量的長度
      var option = $('.uli>li img').length;
      // 左邊部分開始
      $('.a2').click(function(){
    // 再點擊事件裡面執行回調函數
                left()
      })
   // 函數名稱 lest 
      function left(){
    // index的索引值為 0 當他小於圖片的長度的時候 就讓他執行 ++ option要執行減 1 否則會有一張空白的頁面
               if (index < option-1) {
                     index++
                }else {
                 index = 0
                }
                move()
      }
      // 左邊部分結束
      // 右邊部分開始
      $('.a1').click(function(){
    // 再點擊事件裡面執行回調函數
       right()
      })
      function right(){
    // index的索引值為 0 當他大於圖片的長度的時候 就讓他執行 -- 
       if (index > 0) {
        index--
       }else {
        index = option-1
       }
       move()
      }
   // right left函數裡面都有 move 就等於你點擊你的 index 索引的時候為多少數值就會有幾個圖片滑過  500 為時間
      function move(){
               var a = -index * img + 'px'
               $('.uli li>img').animate({'left':a},500)
      }
     })
    </script>
</body>
</html>

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

效果圖讓大傢一睹為快。

視頻放不出來隻能看圖片瞭。

目前的狀況就是這樣哈

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：