當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

手把手教你用jQuery实现手动自动轮播

發布時間：2025/3/18 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了手把手教你用jQuery实现手动自动轮播小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

輪播原理簡述

假設有三張圖，一字排開，用一個div包起來。

再來一個 div ，寬高和每幅圖寬高一樣，加overflow ：hidden，超過此 div 寬高的圖，都看不見。例如下圖只能看見 2 ，而看不到 1 和 3 。

通過 margin-left 或者 transform 等屬性來更改展示的圖片，切換看到圖 1 或者圖 3。

1. 點擊按鈕切換圖片

HTML

<!DOCTYPE html> <html><head> <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <meta charset="utf-8" /> <title>JS Bin</title> </head> <body> <div class="window"> <div class="images" id="images"> <img src="https://tympanus.net/Freebies/Cardio/img/team/team-cover2.jpg" alt="" /> <img src="https://tympanus.net/Freebies/Cardio/img/team/team-cover1.jpg" alt="" /> <img src="https://tympanus.net/Freebies/Cardio/img/team/team-cover3.jpg" alt="" /> </div> </div> <button id="p1">1</button> <button id="p2">2</button> <button id="p3">3</button> </body> </html> 復制代碼

CSS

.images {display: flex;align-items: flex-start;transition: transform 0.5s;/* 圖片切換在 0.5s 內完成，以免切換速度過快或者過慢，用戶不適 */ }.window {width: 370px; /* 以上三張圖片的寬為：370px */overflow: hidden; } 復制代碼

JavaScript （transform 實現）

獲取 3 個 button 的 id ，為 3 個 button 添加點擊事件，點擊后，給 id 為 images 的 div 添加 CSS 樣式 transform ，達到切換圖片、實現輪播的效果。

JavaScript （margin-left 實現）

注意：margin-left 有 - 要用 ' ' 進行包裹。

代碼優化 —— 無限張圖輪播怎么辦？

假如現在有 100 張圖要輪播，難道要 var p1 = document.getElementById('p1'); 一百次？添加 $(p1).on('click', function(){}) 一百次？顯然上面的代碼只顧著實現了功能，沒有考慮代碼的可維護性和拓展性。

修改 HTML 代碼，把 button 放到一個小組里。只需要給“小組長” id 即可，不需要給 button 組員每人一個 id 。

<span id="buttons"><button>1</button><button>2</button><button>3</button> </span> 復制代碼

修改 JavaScript 代碼，獲取所有 button 并添加點擊事件，ev.currentTarget 指向添加監聽事件的對象，.index( ) 獲取點擊 button 的索引，移動的距離 npx 為索引 * 圖片寬度。

現在無論實現多少張圖的輪播，只需要以上幾行代碼輕松實現。

2. 自動輪播

自動輪播，就是讓瀏覽器幫我們以相同時間間隔按順序點擊切換圖片按鈕。
為了使 gif 圖錄制出來的效果明顯，我給選中的按鈕加了黑色背景色。

CSS

.red{background: #000;color:red;} 復制代碼

JavaScript

思路：

利用 n 做計數器，找到要切換的第 n 個 button ，s 秒后觸發第 n 個 button 的點擊事件（切換圖片完成），給所有的 button 加上 red 的屬性，給當前 button 的兄弟元素移除 red 屬性（對應圖片的 button 變成紅色）。

說明：

setInterval() 方法重復調用一個函數或執行一個代碼段，在每次調用之間具有固定的時間延遲。

.eq() 方法是 jQuery 中的一種遍歷方法，這里用來找出第 n % size 張圖。

.trigger() 觸發器可以出發各種事件，比如：click，submit。

思考1：鼠標懸停怎么做？

解決方案：用 mouseenter 和 mouseleave

當鼠標進入圖片的時候，把計時器清除，當鼠標移除的時候，計時器繼續。

給 setInterval 一個名字，叫 timerId。

var timerId = setInterval(()=> {n++;allButtons.eq(n%size).trigger('click').addClass('red').siblings('.red').removeClass('red'); },2000); 復制代碼

鼠標進入圖片，清除計時器

$('.window').on('mouseenter',function(){window.clearInterval(timerId); }) 復制代碼

鼠標移出，恢復計時。

$('.window').on('mouseleave',function(){timerId = setInterval(()=> {n++;allButtons.eq(n%size).trigger('click').addClass('red').siblings('.red').removeClass('red'); },2000) }) 復制代碼

思考2：點擊第 n 個圖片的 button ，從第 n 張圖片開始輪播怎么辦？

記錄被點擊的是哪個 button，將 button 的 index 賦值給 n，遍歷尋找到后添加 red 屬性，并移除該元素兄弟的 red 屬性。

代碼優化

封裝函數

完整代碼

小結

點擊 button 切換圖片（transform & margin-left）

代碼優化——多張圖無限輪播

自動輪播

鼠標懸停

點擊后繼續輪播

封裝函數 & 優化代碼

快動手寫個輪播吧~

總結

以上是生活随笔為你收集整理的手把手教你用jQuery实现手动自动轮播的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： yii2 / 在这里有个叫BaseDat
下一篇： 8Manage项目管理：嵌入人工智能的项