利用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/" src=".//jquery-3.5.1.min.js"></script>
    <style type="text/">
     *{
      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="利用jQuery實現輪播圖效果"></li>
     <li><img src="./img/大蜂蜜綠茶.png" alt="利用jQuery實現輪播圖效果"&g 
t;</li>
     <li><img src="./img/大龍井綠茶.png" alt="利用jQuery實現輪播圖效果"></li>
    </ul>
 <!-- 兩個 div 中的 span 控制右邊的便籤和左邊的標籤為點選事件 -->
    <div class="pa1"> 
     <span class="a1"><</span>
     <span class="a2">></span>
    </div>
    <script type="text/script">
 // 寫一個入口函式
     $(function(){
   // 設定圖片的大小
      var img = 300;
www.cppcns.com 
   // 設定索引為 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>www.cppcns.com

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

效果圖讓大家一睹為快。

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

利用jQuery實現輪播圖效果

目前的狀況就是這樣哈

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

利用jQuery實現輪播圖效果

利用jQuery實現輪播圖效果

jQuery實現輪播圖效果demo

使用jquery實現輪播圖效果

基於jquery實現輪播圖效果

jquery外掛實現輪播圖效果

JS實現輪播圖效果

js實現輪播圖效果 z-index實現輪播圖

jquery實現輪播圖特效

jQuery實現輪播圖

js實現輪播圖效果純js實現圖片自動切換

基於JavaScript實現輪播圖效果

vue-cli 使用swiper實現輪播圖效果

bootstrap實現輪播圖效果

原生javascript+CSS實現輪播圖效果

用jquery實現輪播圖

用JavaScript實現輪播圖效果

用js實現輪播圖效果

原生JavaScript實現輪播圖效果

純js實現輪播圖效果

JS實現輪播圖效果的3種簡單方法

利用jQuery實現輪播圖效果

相關推薦