簡介面向前端初學(xué)者和需要快速實現(xiàn)輪播圖效果的開發(fā)者本資源以可運(yùn)行的 HTML 頁面演示了 JavaScript 原生 DOM 操作與 jQuery 動畫的結(jié)合方式。資源包內(nèi)共 3 個文件包含 1 個 HTML 頁面和 2 張 PNG 圖片素材整體僅 6KB小巧精煉便于直接打開分析或嵌入現(xiàn)有項目。技術(shù)實現(xiàn)上通過原生 JavaScript 封裝核心邏輯利用 jQuery 完成輪播動畫并采用“在末尾多加一張圖”的技巧實現(xiàn)無縫循環(huán)瀏覽有效避免切換到最后一張時出現(xiàn)空白或跳變是理解無縫輪播原理的典型范例。目前已有 298 人學(xué)習(xí)下載適合作為課堂作業(yè)、簡歷項目或入門練習(xí)參考。下載解壓后即可查看完整代碼、圖片素材與 HTML 結(jié)構(gòu)注釋清晰邏輯集中對照圖片素材與動畫代碼可快速掌握 DOM 增刪、樣式切換及 jQuery 動畫調(diào)用的配合方式。1. 都 2025 年了為什么還要用 javaScriptjquery 寫輪播圖拿到一個javaScriptjquery實現(xiàn)輪播圖.zip的資源包很多人的第一反應(yīng)是這玩意兒早過時了。實際上我在維護(hù)某公司內(nèi)部運(yùn)營后臺時遇到最多的就是這類需求老系統(tǒng)基于 jQuery 構(gòu)建要加一個頭圖輪播、公告輪播或商品推薦位團(tuán)隊不可能為了一個組件把整個技術(shù)棧換掉。另一個高頻場景是某高校的課程設(shè)計jQuery 操作 DOM 的直白程度對學(xué)生來說幾乎沒有理解門檻。這個標(biāo)題的本質(zhì)是用原生 javaScript 控制狀態(tài)和邏輯、用 jQuery 簡化 DOM 查找與動畫調(diào)用的輪播圖實現(xiàn)方案。它能解決的是不依賴任何框架、不引入 Swiper 等重型組件庫、兼容老瀏覽器同時把自動播放、左右切換、指示器、循環(huán)滾動這些核心交互完整跑通。適合三類人維護(hù)老項目的開發(fā)者、需要快速交付功能頁的從業(yè)者、以及想弄懂輪播圖底層的初學(xué)者。2. 先把輪播圖的骨架拆開原生 javaScript 里的三件事2.1 狀態(tài)機(jī)currentIndex 是輪播圖唯一的靈魂變量在碰 jQuery 之前建議先把原生 javaScript 的輪播邏輯理清楚。輪播圖的所有行為——顯示哪張圖、圓點高亮在哪、左右箭頭是否禁用——都圍繞一個變量展開當(dāng)前索引。我習(xí)慣用一個對象或者簡單變量來維護(hù)它。// 輪播圖的核心狀態(tài) var state { currentIndex: 0, // 當(dāng)前顯示第幾張 total: 5, // 圖片總數(shù) autoPlayTimer: null // 定時器句柄 };代碼邏輯的核心在于輪播圖不會直接操作每一張圖的顯示隱藏而是只改這個數(shù)字再由一個統(tǒng)一的 render 函數(shù)根據(jù) currentIndex 去更新界面。這樣做的直接好處是邏輯可預(yù)測——無論用戶點擊箭頭、點擊圓點還是自動播放最終都是走同一條更新路徑。參數(shù)說明里值得留意的是 total 不要寫成硬編碼。輪播圖的數(shù)據(jù)往往來自后端下發(fā)的圖片數(shù)組total 應(yīng)該取數(shù)組的 length。如果直接把 5 寫死在狀態(tài)里后期數(shù)據(jù)源從接口返回時就得多改一處。定時器句柄單獨存一個字段是為了后面能隨時清除和重建定時器。2.2 手動切換與自動播放的分工click 是瞬間的事setInterval 是常態(tài)手動切換和自動播放是兩套互相獨立又共享同一 state 的機(jī)制。// 手動切換向前或向后走一步 function goPrev() { state.currentIndex (state.currentIndex - 1 state.total) % state.total; render(); } function goNext() { state.currentIndex (state.currentIndex 1) % state.total; render(); } // 自動播放每隔 3 秒走一步 function startAutoPlay() { stopAutoPlay(); state.autoPlayTimer setInterval(goNext, 3000); } function stopAutoPlay() { if (state.autoPlayTimer) { clearInterval(state.autoPlayTimer); state.autoPlayTimer null; } }手動切換用取模運(yùn)算% state.total實現(xiàn)循環(huán)當(dāng) currentIndex 從最后一張往前回退時(currentIndex - 1 total) % total這個寫法保證了結(jié)果不為負(fù)數(shù)。這是原生 javaScript 寫輪播圖最常見的邊界處理。自動播放的關(guān)鍵在于 startAutoPlay 里先調(diào)用 stopAutoPlay而不是直接 setInterval。原因是鼠標(biāo)反復(fù)移入移出時如果每次都 new 一個定時器舊定時器沒有被清除會出現(xiàn)加速輪播的翻車情況。先停后開是處理這類問題的通用習(xí)慣叫數(shù)組也好、其他定時場景也好都適用。2.3 render 函數(shù)把狀態(tài)同步到 DOM 和樣式render 負(fù)責(zé)把所有狀態(tài)變成可見的界面變化。function render() { var items document.querySelectorAll(.carousel-item); var dots document.querySelectorAll(.carousel-dot); // 隱藏所有圖片只顯示當(dāng)前這張 items.forEach(function (item, index) { item.style.display index state.currentIndex ? block : none; }); // 同步圓點高亮 dots.forEach(function (dot, index) { dot.className index state.currentIndex ? carousel-dot active : carousel-dot; }); }render 里做了兩件事切換圖片顯示、切換圓點高亮。用 display block/none 是淡入淡出模式的基礎(chǔ)做法邏輯簡單任何瀏覽器都支持缺點是圖片切換是瞬變的沒有過渡動畫。如果要做滑動動畫render 就不該直接改 display而是改 transform 或者 left 值后面在 jQuery 方案里我會展開講。到這里你會發(fā)現(xiàn)原生 javaScript 實現(xiàn)的輪播圖代碼量并不大核心其實就這三塊。把 state、切換函數(shù)、render 函數(shù)三個角色理清了再看 jQuery 方案就只是把其中 getElementById、querySelectorAll 替換成 $ 選擇器把 style 操作換成 jQuery 的 css 方法和 animate 方法罷了。3. 基于 jQuery 的輪播圖落地完整代碼與逐段說明3.1 解壓資源包后的文件結(jié)構(gòu)和一個可運(yùn)行的 HTML 頁拿到j(luò)avaScriptjquery實現(xiàn)輪播圖.zip這類資源包通常里面有 index.html、css 目錄、js 目錄和圖片占位。實際操作時我不建議直接改壓縮包里的源碼而是在旁邊新建一個工作目錄把需要用的 jQuery 庫文件或者 CDN 鏈接準(zhǔn)備好然后從零敲一遍。這個習(xí)慣能幫你確認(rèn)自己是否真的理解了每一行代碼。下面是可直接運(yùn)行的完整頁面我把 CSS 內(nèi)聯(lián)在 style 標(biāo)簽里jQuery 用 3.x 版本兼容 IE9 以上的瀏覽器。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titlejavaScriptjquery輪播圖實現(xiàn)/title style * { margin: 0; padding: 0; box-sizing: border-box; } .carousel { position: relative; width: 800px; height: 400px; margin: 40px auto; overflow: hidden; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); } .carousel-list { width: 100%; height: 100%; display: flex; /* 橫向排列圖片 */ } .carousel-item { width: 800px; height: 400px; flex-shrink: 0; } .carousel-item img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 左右箭頭 */ .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: rgba(0, 0, 0, 0.5); color: #fff; border: none; cursor: pointer; font-size: 20px; line-height: 40px; text-align: center; z-index: 10; } .carousel-arrow.prev { left: 10px; } .carousel-arrow.next { right: 10px; } /* 指示器圓點 */ .carousel-dots { position: absolute; bottom: 15px; left: 0; right: 0; text-align: center; z-index: 10; } .carousel-dot { display: inline-block; width: 10px; height: 10px; background: rgba(255, 255, 255, 0.6); border-radius: 50%; margin: 0 6px; cursor: pointer; transition: background 0.3s; } .carousel-dot.active { background: #ff6600; } /style /head body div classcarousel idcarousel !-- 圖片列表 -- div classcarousel-list div classcarousel-itemimg srcimages/1.jpg altslide 1/div div classcarousel-itemimg srcimages/2.jpg altslide 2/div div classcarousel-itemimg srcimages/3.jpg altslide 3/div div classcarousel-itemimg srcimages/4.jpg altslide 4/div div classcarousel-itemimg srcimages/5.jpg altslide 5/div /div !-- 左右箭頭 -- button classcarousel-arrow prev#10094;/button button classcarousel-arrow next#10095;/button !-- 指示器 -- div classcarousel-dots span classcarousel-dot active>$(function () { // 獲取必要元素 var $carousel $(#carousel); var $list $carousel.find(.carousel-list); var $items $carousel.find(.carousel-item); var $dots $carousel.find(.carousel-dot); // 配置參數(shù) var config { interval: 3000, // 自動播放間隔單位毫秒 duration: 500, // 動畫時長單位毫秒 autoPlay: true // 是否開啟自動播放 }; var currentIndex 0; var itemCount $items.length; var timer null; // 切換到指定索引 function goTo(index) { // 處理邊界小于 0 跳到末尾大于最大值回到開頭 if (index 0) { index itemCount - 1; } else if (index itemCount) { index 0; } currentIndex index; // 通過 transform 移動列表達(dá)到滑動效果 $list.stop().animate({ margin-left: -currentIndex * $carousel.width() px }, config.duration, function () { // 動畫結(jié)束后的回調(diào)可擴(kuò)展懶加載 }); // 同步圓點高亮 $dots.removeClass(active) .eq(currentIndex) .addClass(active); } // 上一張 / 下一張 function goPrev() { goTo(currentIndex - 1); } function goNext() { goTo(currentIndex 1); } // 自動播放控制 function startAutoPlay() { if (!config.autoPlay) return; stopAutoPlay(); timer setInterval(goNext, config.interval); } function stopAutoPlay() { if (timer) { clearInterval(timer); timer null; } } // 綁定事件 $carousel.find(.carousel-arrow.prev).on(click, function () { goPrev(); startAutoPlay(); // 手動操作后重置計時器 }); $carousel.find(.carousel-arrow.next).on(click, function () { goNext(); startAutoPlay(); }); $dots.on(click, function () { var index $(this).data(index); goTo(index); startAutoPlay(); }); // 鼠標(biāo)懸停暫停自動播放 $carousel.on(mouseenter, stopAutoPlay) .on(mouseleave, startAutoPlay); // 初始化顯示第一張啟動自動播放 goTo(0); startAutoPlay(); });這段代碼里我最想強(qiáng)調(diào)的寫法是$list.stop().animate(...)。stop 方法的作用是清除元素上尚未結(jié)束的動畫隊列。如果沒有 stop當(dāng)用戶快速連續(xù)點擊箭頭時動畫會在隊列里排隊執(zhí)行表現(xiàn)出來就是圖片瘋狂地一張接一張滑動停不下來這是輪播圖踩坑報表里的頭號問題。加上 stop 之后每次新動畫都會立即中斷上一個動畫從當(dāng)前位置繼續(xù)移動。參數(shù)說明里有一個細(xì)節(jié)值得展開我用了margin-left而不是 CSS 的transform: translateX()。jQuery 的 animate 方法對 margin-left 這類數(shù)值型 CSS 屬性支持非常成熟但對 transform 的動畫支持在舊版本里并不理想。用 margin-left 的代價是會有一次 reflow性能略低于 transform但在這個組件規(guī)模下完全無感。如果在現(xiàn)代瀏覽器里追求極致性能可以改用 transform但需要借助 jQuery 的 step 回調(diào)或者 CSS transition 配合復(fù)雜度會上升。3.3 圓點>// 圓點點擊跳轉(zhuǎn) $dots.on(click, function () { var index $(this).data(index); goTo(index); startAutoPlay(); });聯(lián)動機(jī)制分兩半點擊時從>// goTo 里的邊界處理 if (index 0) { index itemCount - 1; } else if (index itemCount) { index 0; }這里其實用的是偽無縫方案——從最后一張切到第一張時動畫方向是繼續(xù)向右滑圖片列表會快速從第 5 張拉到第 1 張視覺上等效于無限循環(huán)。真正的無縫還需要在列表末尾克隆一份第一張圖片、在開頭克隆最后一張然后動畫結(jié)束后瞬間修正位置那是另一個復(fù)雜度級別。使用偽無縫方案時必須保證所有圖片寬度嚴(yán)格等于容器寬度。如果有某張圖片寬度異常整個列表的 margin-left 計算就會錯位表現(xiàn)為滑動后卡在兩張圖中間。我在實際項目里就遇到過圖片服務(wù)器返回的圖片尺寸不統(tǒng)一的情況保險做法是在 img 標(biāo)簽上強(qiáng)制 CSS 設(shè)置width: 100%加上object-fit: cover讓圖片無論如何都填滿容器。4.3 圖片懶加載與接口數(shù)據(jù)的綁定把輪播圖接到真實后端頁面上放的輪播圖往往不只一張首屏很多運(yùn)營位一次配 5-8 張高清圖。全部在頁面初始化時加載會拖慢首屏速度所以懶加載幾乎是上線前的必做項。一個輕量方案是用 img 的>// 在 goTo 的動畫回調(diào)里做懶加載 $list.stop().animate({ margin-left: -currentIndex * $carousel.width() px }, config.duration, function () { // 當(dāng)前索引對應(yīng)的圖片如果沒有加載過則加載 var $currentImg $items.eq(currentIndex).find(img); var realSrc $currentImg.data(src); if (realSrc $currentImg.attr(src) ! realSrc) { $currentImg.attr(src, realSrc); } });與后端接口綁定是另一個常見需求。輪播圖數(shù)據(jù)不應(yīng)該寫死在 HTML 里而是頁面加載完成后通過 ajax 請求獲取。// 假設(shè)后端返回 { code: 0, data: { slides: [{ image: url1, link: url1_link }, ...] } } $.ajax({ url: /api/banner/list, method: GET, dataType: json, success: function (res) { if (res.code 0 res.data.slides.length 0) { buildCarousel(res.data.slides); } } }); function buildCarousel(slides) { // 根據(jù)數(shù)據(jù)動態(tài)生成 carousel-item 和 carousel-dot // 然后重新初始化當(dāng)前輪播組件的 currentIndex 和 itemCount }接口綁定最常見的坑是數(shù)據(jù)返回時機(jī)不確定導(dǎo)致動態(tài)生成的圖片數(shù)量和 CSS 里寫死的寬度對不上。所以在 buildCarousel 里每次完成重建后都要重新執(zhí)行一次 goTo(0)同時把第 3.2 節(jié)里固定寫在 HTML 中的 itemCount 更新為新的 slides 長度。5. 輪播圖避坑清單五個高頻問題與排查方法5.1 快速點擊左右箭頭圖片瘋狂滑動停不下來現(xiàn)象用戶快速連續(xù)點擊下一張箭頭輪播圖里的圖片像播放加速視頻一樣連續(xù)快速滑動甚至跳過了中間幾張。原因每次點擊都觸發(fā)一個 animate 動畫jQuery 會把動畫加入隊列。沒有調(diào)用 stop 的情況下隊列里的動畫會依次執(zhí)行完畢表現(xiàn)得像停不下來。解決在 animate 之前執(zhí)行$list.stop()方法。stop 的機(jī)制是停止當(dāng)前正在執(zhí)行的動畫并清除隊列中后續(xù)的所有動畫。需要留意 stop 的默認(rèn)參數(shù)stop(false, false)表示不跳到動畫最終值、不清除當(dāng)前動畫。而stop(true, true)會直接跳到動畫結(jié)束位置視覺效果可能突兀。輪播場景用默認(rèn)的stop()即可。5.2 自動播放在窗口切到后臺后跳幀現(xiàn)象瀏覽器標(biāo)簽頁切到后臺一段時間再回來發(fā)現(xiàn)輪播圖畫面快速閃過幾次或者直接從某一幀跳到了另一幀。原因現(xiàn)代瀏覽器為了省電會對后臺標(biāo)簽頁的 setInterval 做節(jié)流。interval 為 3000ms 的定時器在后臺可能變成 1000ms 甚至更久執(zhí)行一次。切回前臺時瀏覽器可能連續(xù)補(bǔ)執(zhí)行多次回調(diào)造成跳幀。解決監(jiān)聽visibilitychange事件當(dāng)頁面可見時才啟動自動播放不可見時暫停。document.addEventListener(visibilitychange, function () { if (document.hidden) { stopAutoPlay(); } else { startAutoPlay(); } });這是輪播圖上線后最容易被忽略的體驗問題之一尤其適合在做活動頁、大屏展示時需要長時間掛機(jī)的場景。5.3 第一張和最后一張切換時列表右側(cè)露出大片空白現(xiàn)象從最后一張點擊下一張時圖片列表向左滑動但容器右側(cè)出現(xiàn)大塊空白區(qū)域露出背景色。原因圖片列表用 margin-left 整體往左移動當(dāng)?shù)搅俗詈笠粡垥r已經(jīng)沒有后續(xù)圖片可以填充右側(cè)所以空白暴露出來。這說明當(dāng)前版本的邊界判斷沒有形成真正的循環(huán)。解決在列表末尾額外克隆第一張圖片追加進(jìn)去或者在開頭克隆最后一張。當(dāng)用戶從最后一張切到第一張視覺上是克隆的第一張時動畫結(jié)束瞬間把 margin-left 改回 0 位置且禁用動畫用戶在視覺上察覺不到任何跳變。注意克隆時要用clone()方法避免把事件和 data 一起復(fù)制。5.4 jQuery 庫文件加載失敗導(dǎo)致整個腳本報錯現(xiàn)象打開頁面后輪播圖完全不渲染瀏覽器控制臺報錯類似于$ is not defined。原因script 標(biāo)簽引入 jQuery 的 CDN 鏈接掛掉或者引入了錯誤的文件路徑。更隱蔽的是 jQuery 加載有延遲而下方的 carousel.js 先執(zhí)行了。解決把 carousel.js 的 script 標(biāo)簽放在 jQuery 引入之后執(zhí)行且對 CDN 做本地兜底。// 在 script 引入前先用 fallback 判斷 window.jQuery 是否存在 if (!window.jQuery) { document.write(script srcjs/jquery-3.6.0.min.js\/script); }防線上我在前面 setTimeout 做重試還不如直接本地放置一份 jQuery 文件更省心。老系統(tǒng)內(nèi)部網(wǎng)絡(luò)訪問外網(wǎng) CDN 可能被攔截本地化是可靠方案。5.5 resize 窗口后輪播圖錯位圖片顯示范圍偏了現(xiàn)象瀏覽器窗口拖動變化后輪播圖的圖片不再居中甚至露出一部分相鄰圖片。原因第 3.2 節(jié)中 margin-left 的計算用到了$carousel.width()窗口寬度改變時容器寬度變化但 margin-left 還是按之前的寬度計算的。解決監(jiān)聽 window 的 resize 事件防抖后重新執(zhí)行 goTo(currentIndex)讓 margin-left 按新寬度重新計算。var resizeTimer; $(window).on(resize, function () { clearTimeout(resizeTimer); resizeTimer setTimeout(function () { goTo(currentIndex); }, 200); });200ms 的延遲是為了防抖避免窗口拖動過程中反復(fù)觸發(fā)重計算。這種問題在響應(yīng)式布局下極易出現(xiàn)尤其是輪播圖容器寬度是百分比而非固定像素時必須做 resize 適配。6. 把輪播圖嵌進(jìn)真實頁面URL 定位、回調(diào)擴(kuò)展與組件化改造的邊界進(jìn)階改造的第一個實用技巧是支持 URL 參數(shù)直接定位到指定輪播圖?；顒舆\(yùn)營經(jīng)常會說用戶從某篇文章點進(jìn)來希望第一眼看到的是第 3 張圖這時候用 URL 的 hash 或 query 參數(shù)攜帶索引。// 從 URL 讀取目標(biāo)索引 function getTargetIndexFromUrl() { var params new URLSearchParams(window.location.search); var target parseInt(params.get(slide), 10); if (!isNaN(target) target 0 target itemCount) { return target; } return 0; } // 初始化時用目標(biāo)索引替代寫死的 0 var initIndex getTargetIndexFromUrl(); goTo(initIndex);這個方案實現(xiàn)成本極低但能解決一個非常實際的問題當(dāng)輪播圖承載營銷內(nèi)容時運(yùn)營需要精確引導(dǎo)用戶觀看某一張而不是靠用戶自己點。URL 參數(shù)的方式天然支持分享和埋點統(tǒng)計。第二個進(jìn)階方向是給輪播圖加回調(diào)鉤子。當(dāng)前代碼里 goTo 函數(shù)在動畫結(jié)束后只有一句空回調(diào)可以擴(kuò)展成接受一個 onAfterChange 回調(diào)參數(shù)用于統(tǒng)計曝光或做聯(lián)動操作。function goTo(index, callback) { // ...原有邏輯 $list.stop().animate({ margin-left: -currentIndex * $carousel.width() px }, config.duration, function () { if (typeof callback function) { callback(currentIndex); } }); }這樣可以在業(yè)務(wù)側(cè)做到輪播到第 N 張時自動請求該商品的數(shù)據(jù)并渲染到旁邊的詳情區(qū)域輪播圖從一個展示組件變成一個引導(dǎo)工具。第三個邊界是組件化改造的條件判斷。如果你的頁面已經(jīng)用了 Vue 或 ReactjQuery 輪播圖直接往里面嵌會顯得很別扭——因為框架管理 DOM 和 jQuery 手動操作 DOM 會互相打架。我的判斷標(biāo)準(zhǔn)很簡單如果這個輪播圖只是某個老頁面里的獨立島嶼周圍沒有框架干擾jQuery 方案依然高效如果它要作為整個應(yīng)用的一個子組件并被響應(yīng)式數(shù)據(jù)驅(qū)動那就應(yīng)該換成框架原生的實現(xiàn)或者用 Swiper。jQuery 在這些場景里不是不好而是邊界維護(hù)成本太高。我自己的習(xí)慣是把這套輪播圖封裝成一個工廠函數(shù)傳入容器選擇器和配置對象就能自動初始化這樣在多個運(yùn)營頁面里復(fù)用只需要一行代碼。封裝時記得把 stopAutoPlay 和 goTo 暴露到外部方便后續(xù)操作。這個方向投入成本不大但確實能讓你后續(xù)接需求時少熬夜。希望幫到你。本文還有配套的精品資源點擊獲取