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

更新時(shí)間：2021年08月25日 08:40:38 作者：別摸頭，會(huì)長(zhǎng)不高耶！

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

今天給大家?guī)?lái)的就是使用jQuery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的輪播圖，實(shí)現(xiàn)的原理就是：

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

2、獲取圖片的大小為300，索引從0開(kāi)始

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

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

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>
 <!-- 兩個(gè) div 中的 span 控制右邊的便簽和左邊的標(biāo)簽為點(diǎn)擊事件 -->
    <div class="pa1"> 
     <span class="a1"><</span>
     <span class="a2">></span>
    </div>
    <script type="text/javascript">
 // 寫一個(gè)入口函數(shù)
     $(function(){
   // 設(shè)置圖片的大小
      var img = 300;
   // 設(shè)置索引為 0 
      var index = 0;
   // 設(shè)置圖片的數(shù)量的長(zhǎng)度
      var option = $('.uli>li img').length;
      // 左邊部分開(kāi)始
      $('.a2').click(function(){
    // 再點(diǎn)擊事件里面執(zhí)行回調(diào)函數(shù)
                left()
      })
   // 函數(shù)名稱 lest 
      function left(){
    // index的索引值為 0 當(dāng)他小于圖片的長(zhǎng)度的時(shí)候 就讓他執(zhí)行 ++ option要執(zhí)行減 1 否則會(huì)有一張空白的頁(yè)面
               if (index < option-1) {
                     index++
                }else {
                 index = 0
                }
                move()
      }
      // 左邊部分結(jié)束
      // 右邊部分開(kāi)始
      $('.a1').click(function(){
    // 再點(diǎn)擊事件里面執(zhí)行回調(diào)函數(shù)
       right()
      })
      function right(){
    // index的索引值為 0 當(dāng)他大于圖片的長(zhǎng)度的時(shí)候 就讓他執(zhí)行 -- 
       if (index > 0) {
        index--
       }else {
        index = option-1
       }
       move()
      }
   // right left函數(shù)里面都有 move 就等于你點(diǎn)擊你的 index 索引的時(shí)候?yàn)槎嗌贁?shù)值就會(huì)有幾個(gè)圖片滑過(guò)  500 為時(shí)間
      function move(){
               var a = -index * img + 'px'
               $('.uli li>img').animate({'left':a},500)
      }
     })
    </script>
</body>
</html>

這是以上的代碼，大家可以動(dòng)手試試小案例。

效果圖讓大家一睹為快。

視頻放不出來(lái)只能看圖片了。