jQuery无缝轮播图实现：首尾克隆、transitionend复位与动画锁

简介：这份轮播图示例面向正在学习前端交互与动画的开发者，聚焦用原生 JavaScript 操作 DOM，再结合 jQuery 动画完成无缝轮播效果。压缩包共 3 个文件，包含 1 个 HTML 演示页面和 2 张 PNG 左右切换按钮图片，整体约 6KB，体量轻便，便于直接打开查看结构与运行效果。已有 301 人学习，说明其对入门与进阶练习均有一定参考价值。代码采用原生方法进行封装，把轮播所需的节点选取、索引切换等逻辑独立出来，同时借助 jQuery 实现过渡动画；描述中还特别提到在末尾额外增加一张的“障目”技巧，用于浏览到最后一张时平滑衔接回第一张。读者可据此理解无缝轮播的实现思路、DOM 操作与动画库配合方式，并在此基础上改造成自己的轮播组件。

1. 后台首页 banner、课程设计里的组件作业，绕不开的都是同一个动作：用 JavaScript + jQuery 轮播图把几张大图串起来循环播放。手写过一遍的人都清楚，切到最后一张再回到第一张，left值一旦归零，屏幕上必然出现一次整屏回扫，那一瞬间的观感比不做动画还差。无缝两个字听着像玄学，落到代码上其实就三件事：首尾各克隆一张制造“永远还有下一张”的错觉、用transitionend在动画结束时瞬移复位、用一把锁防止用户在动画途中连点。这套资源就是围绕这三件事搭起来的一份完整轮播图实现，从 DOM 骨架、位移计算、自动播放、指示器联动，一直到移动端滑动和定时器回收，全部收在一个可配置的 jQuery 插件里。适合正在做前端课程设计、毕业设计首页模块的人，也适合需要给内部系统快速补一个 banner 位、不想再引一个重框架的开发者。

2. 总体结构设计：三层 DOM 与两套状态的职责划分

轮播图看起来只是“一排图片横向移动”，真正写起来最容易乱的地方不是动画，而是谁负责裁剪、谁负责位移、谁负责记录当前位置。这三件事如果压在同一个元素上，后面加箭头、加指示器、加移动端滑动时会一路互相牵连。所以第一件要定下来的事，是把结构切成三层，把状态收成一份。

2.1 三层骨架：容器、视口、轨道的分工

最外层.carousel只做定位上下文和外框装饰，圆角、阴影、左右箭头都挂在它身上。中间层.carousel-viewport负责overflow: hidden，把超出可视区的内容裁掉。最内层.carousel-track是被真正平移的元素，所有幻灯片在它内部横向排开。

这么切的好处很直接：箭头和指示器在结构上属于外层容器，天然不受裁剪层影响；后面想给容器加外发光、加半透明蒙层、把箭头挪到容器外侧，都不用动裁剪逻辑。如果图省事把overflow: hidden直接写在.carousel上，加个超出边界的箭头就会发现自己被裁掉了一半，只能靠调z-index和padding打补丁。

<!-- 外层：定位上下文，箭头与指示器都挂在这一层 --> <div class="carousel" id="banner"> <!-- 视口：唯一负责裁剪的层 --> <div class="carousel-viewport"> <!-- 轨道：被 translate 的元素，所有幻灯片横向排列 --> <ul class="carousel-track"> <li class="carousel-item"><img src="images/01.jpg" alt="第一屏"></li> <li class="carousel-item"><img src="images/02.jpg" alt="第二屏"></li> <li class="carousel-item"><img src="images/03.jpg" alt="第三屏"></li> </ul> </div> <!-- 指示器由脚本按真实张数动态生成，不写死在 HTML 里 --> <ol class="carousel-dots"></ol> <a class="carousel-arrow prev" href="javascript:;" aria-label="上一张"></a> <a class="carousel-arrow next" href="javascript:;" aria-label="下一张"></a> </div>

上面的结构中，.carousel-item的数量是手写的真实张数，克隆节点由脚本在初始化时插入，不污染原始 HTML。这一点很重要：HTML 里写几屏就是几屏，后面接后台数据、做服务端渲染都不会因为多出来的克隆节点对不上数。

2.2 位移方案选型：left 与 transform 的取舍

早期教程里清一色用left做位移，改一次left触发一次布局计算加一次重绘，在幻灯片里带图片、带文字阴影的情况下，帧率掉到 30 以下是常有的事。改用transform: translate3d()之后，浏览器可以把轨道提升为一个独立的合成层，位移只在合成阶段完成，不参与布局和绘制。

/* 容器只做定位上下文，不参与动画 */ .carousel { position: relative; width: 100%; overflow: hidden; /* 兜底裁剪，防止圆角下露出边缘 */ border-radius: 8px; } .carousel-viewport { overflow: hidden; /* 真正的裁剪层 */ } .carousel-track { display: flex; /* 用 flex 横向排布，省掉浮动的清除逻辑 */ margin: 0; padding: 0; list-style: none; will-change: transform; /* 提前告知浏览器该层会动，减少合成抖动 */ transform: translate3d(0, 0, 0); } .carousel-item { flex: 0 0 100%; /* 每张占满一屏，不允许伸缩 */ height: 100%; } .carousel-item img { display: block; /* 去掉行内元素底部那几像素的基线间隙 */ width: 100%; height: auto; } /* 过渡开关由脚本增删，复位那一帧必须没有过渡 */ .carousel-track.is-animating { transition: transform .5s cubic-bezier(.25, .8, .25, 1); }

.is-animating这个类是整个方案里最关键的开关。需要动画时加上，瞬移复位时先去掉、改完transform再加回来。如果过渡时长写死在 CSS 里拿不掉，复位的那一帧也会带 0.5 秒的过渡，屏幕上就是一整屏倒着滑回去，无缝直接失效。

transform有一个副作用要提前知道：它会给后代元素创建新的包含块，幻灯片内部如果有position: fixed的弹层，会变成相对轨道定位而不是相对视口。轮播里出现 fixed 弹层的场景不多，真遇到了就把弹层挂到body上。

2.3 配置项与状态字段的抽象

一份能复用的轮播组件，配置项和内部状态必须分清楚。配置是调用方传进来的、整个生命周期基本不变；状态是组件自己维护的、每一帧都可能变。混在一起写，后面调参数会连自己都搞不清哪个能改。

slideWidth取自.carousel-viewport的宽度，不是$(window).width()。轮播容器很少是满屏宽的，后台系统里经常是侧边栏旁边一块 800px 的区域，用窗口宽度算出来的位移会直接错位。另外这个值必须在图片加载完成或 DOM 就绪之后读，否则可能拿到 0，表现为第一次切换整块白屏。

3. 无缝滚动的实现：首尾克隆与索引复位

无缝的核心思路可以用一句话概括：让轨道里永远存在一张“视觉上的下一张”。真实图片是 1、2、3，轨道里排成 3、1、2、3、1，当前停在第 1 张的位置，往右走永远有图，走到末尾那张克隆的 1 时，动画结束的瞬间把轨道瞬移回真正的 1，人眼看不出来。

3.1 克隆节点的插入位置与索引映射

初始化的顺序不能乱：先数真实张数，再克隆，最后定位。

/** * 初始化轨道结构：首尾各克隆一张，制造无缝的视觉前提 * @param {jQuery} $track 轨道元素 * @returns {number} 真实幻灯片数量 */ function initTrack($track) { var $items = $track.children(); var realCount = $items.length; // 只有一张图时没有轮播的意义，直接返回，不插入克隆 if (realCount <= 1) return realCount; // 头部插入最后一张，尾部插入第一张 $track.prepend($items.eq(realCount - 1).clone().addClass('is-clone')); $track.append($items.eq(0).clone().addClass('is-clone')); return realCount; }

克隆完成后，轨道里的 DOM 顺序是[克隆3, 1, 2, 3, 克隆1]，共 realCount + 2 个节点。逻辑索引和物理位置的对应关系是：物理位置 = 逻辑索引 + 1。逻辑索引 0 对应第一张真图，逻辑索引 -1 对应头部克隆，逻辑索引 realCount 对应尾部克隆。

这个 +1 的偏移量要贯穿所有位移计算，是最容易写错的地方。位移公式统一成：

// index 为逻辑索引，取值 -1 到 realCount var offset = -(index + 1) * slideWidth;

初始化时index = 0，位移是-slideWidth，也就是把轨道往左推一屏，正好露出第一张真图。

3.2 位移渲染与 transitionend 复位

渲染函数负责三件事：加不加过渡类、设不设位移、指示器高亮到哪一张。

/** * 渲染到指定逻辑索引 * @param {number} index 逻辑索引，-1 与 realCount 表示克隆位 * @param {boolean} animate 是否启用过渡动画 */ Carousel.prototype.render = function (index, animate) { var offset = -(index + 1) * this.slideWidth; // 先切过渡开关，再设位移，保证复位那一帧没有动画 this.$track.toggleClass('is-animating', !!animate) .css('transform', 'translate3d(' + offset + 'px, 0, 0)'); this.currentIndex = index; // 指示器永远按真实索引高亮，克隆位要归一 var real = this.normalize(index); this.$dots.children() .removeClass('active') .eq(real).addClass('active'); }; /** * 把克隆位归一成真实索引 * @param {number} index 逻辑索引 * @returns {number} 0 ~ realCount-1 */ Carousel.prototype.normalize = function (index) { if (index < 0) return this.realCount - 1; if (index >= this.realCount) return 0; return index; };

复位发生在过渡结束事件里。这里有个必须处理的细节：transitionend会从子元素冒泡上来，幻灯片里如果自己带了 hover 过渡，事件会一路冒到轨道上，误触发复位。所以要判断e.target是不是轨道本身。

Carousel.prototype.bindReset = function () { var self = this; this.$track.on('transitionend.carousel', function (e) { // 过滤掉子元素冒泡上来的过渡结束事件 if (e.target !== this) return; // 停在尾部克隆：瞬移回真正的第一张 if (self.currentIndex === self.realCount) { self.render(0, false); } // 停在头部克隆：瞬移回真正的最后一张 else if (self.currentIndex === -1) { self.render(self.realCount - 1, false); } self.locked = false; // 动画结束，解锁 self.$root.trigger('carousel:settle', [self.currentIndex]); }); };

carousel:settle这个自定义事件是留给外部用的。页面里如果有文案、背景色跟着轮播一起变，绑这个事件比去改插件源码干净得多，这也是判断一份轮播代码能不能直接拿去交付的分水岭之一。

3.3 边界场景：单图、双图与快速连点

三种情况必须在写的时候就想到，不能等测试提上来再补。

单图场景：realCount <= 1时不插入克隆，不启动自动播放，左右箭头直接hide()。硬要轮播的话，用户点右键看到的是同一张图在动，比不动更奇怪。

双图场景：克隆后轨道里是[2, 1, 2, 1]，逻辑上完全走得通，A→B→克隆A→B 循环。视觉上确实是无缝的，只是两张图来回切的节奏感比较单调，要不要在双图时也关掉自动播放，取决于业务，组件层面不用特殊处理。

快速连点：用户手快的时候，一次 0.5 秒的动画里能点三次右键。不设锁的话，currentIndex会被连续改写，位移一层层叠上去，最终停在哪个位置完全看运气，运气差就停在克隆位上，下一次切换直接跳屏。

/** * 按方向切换 * @param {number} step 步长，1 表示下一张，-1 表示上一张，可传多步 */ Carousel.prototype.go = function (step) { // 动画未结束，直接丢弃本次请求 if (this.locked) return; var next = this.currentIndex + step; // 正常调用不会越界，越界说明外部传参有问题，直接返回 if (next < -1 || next > this.realCount) return; this.locked = true; this.render(next, true); };

这把锁的释放时机只有两个：transitionend触发，或者兜底的超时定时器到点。第二个非常关键——浏览器标签页切到后台时，CSS 过渡可能被挂起，transitionend迟迟不来，锁就一直不放，用户回到页面发现轮播图点不动了，现象像死机，排查起来毫无头绪。

// 在 render 里加兜底，防止 transitionend 因页面不可见而丢失 this._unlockTimer = setTimeout(function () { self.locked = false; }, self.opts.duration + 100); // 比动画时长多留 100ms 容错

4. 交互层实现：自动播放、指示器与移动端滑动

到了这一层，轮播已经从“会动的图”变成“能用的组件”。自动播放管的是时间，指示器和箭头管的是手动控制，手势管的是移动端，三者的共同点是都要能随时停、随时启、随时销毁。

4.1 定时器生命周期与悬停暂停

自动播放用递归setTimeout而不是setInterval。setInterval不管上一次切换有没有结束，到点就往下走，动画一卡顿就积压，最后表现为连跳好几张。递归写法是等这次切换稳定了再排下一次。

/** * 启动自动播放，重复调用安全 */ Carousel.prototype.play = function () { var self = this; if (!this.opts.autoplay || this.realCount <= 1) return; this.stop(); // 先清旧的，避免定时器叠加 this.timer = setTimeout(function tick() { self.go(1); // 本次排完再排下一次，切换稳定后才开始计时 self.timer = setTimeout(tick, self.opts.interval); }, this.opts.interval); }; /** * 停止自动播放 */ Carousel.prototype.stop = function () { if (this.timer) { clearTimeout(this.timer); this.timer = null; } };

悬停暂停的坑在于成对绑定。只绑mouseenter不绑mouseleave，鼠标划过去一次就永久停了；绑了mouseleave但里面写的是if (this.timer) play()，也会因为判断条件写错而失效。稳妥的写法是不做任何判断，mouseleave里无条件调play()，因为play()内部第一句就是stop()。

if (this.opts.pauseOnHover) { this.$root .on('mouseenter.carousel', function () { self.stop(); }) .on('mouseleave.carousel', function () { self.play(); }); }

事件名后面统一带.carousel命名空间，销毁时一个off('.carousel')就能全部解绑，不会误伤页面上其他逻辑。这个习惯在单页应用里尤其值钱。

4.2 指示器与左右箭头的联动

指示器的数量按真实张数生成，不按 DOM 节点数生成，否则会把两张克隆也算进去，出现两个高亮。

Carousel.prototype.buildDots = function () { var html = ''; for (var i = 0; i < this.realCount; i++) { html += '<li>this.$dots.on('click.carousel', 'li', function () { var target = $(this).data('index'); var current = self.normalize(self.currentIndex); if (target === current) return; // 按最短路径折算步数，避免从第 1 张点到第 5 张时倒退着滑过整屏 var diff = target - current; if (Math.abs(diff) > self.realCount / 2) { diff = diff > 0 ? diff - self.realCount : diff + self.realCount; } self.go(diff); });

这段折算逻辑值得单独说一句。假设共 6 张，当前在第 1 张，用户点了第 6 张。不折算的话diff = 5，画面会连续往前滑 5 屏；按最短路径折算成-1，就是往回滑一格到第 6 张，观感上顺得多。这个细节在课程设计答辩里很加分，因为它说明写代码的人真的站在用户位置想过。

左右箭头直接绑go(1)和go(-1)，同时要处理禁用状态：只有一张图时不显示，这是基本的可用性。

4.3 移动端手势滑动与阈值判断

手势部分最容易翻车的地方是阻止默认行为。touchmove里无脑preventDefault()，页面就滑不动了，用户想上下滚动看内容，结果全被轮播吃掉。

this.$root .on('touchstart.carousel', function (e) { if (!self.opts.swipe) return; var t = e.originalEvent.touches[0]; self.startX = t.clientX; self.startY = t.clientY; self.deltaX = 0; self.startTime = Date.now(); self.stop(); // 手指按下立即暂停自动播放 }) .on('touchmove.carousel', function (e) { if (self.startX === null) return; var t = e.originalEvent.touches[0]; self.deltaX = t.clientX - self.startX; var deltaY = t.clientY - self.startY; // 横向位移明显大于纵向时才拦截，避免吃掉页面纵向滚动 if (Math.abs(self.deltaX) > Math.abs(deltaY)) { e.preventDefault(); } }) .on('touchend.carousel', function () { if (self.startX === null) return; var threshold = self.slideWidth * 0.2; // 滑过 20% 宽度才算翻页 var isFast = Date.now() - self.startTime < 250 && Math.abs(self.deltaX) > 30; if (self.deltaX < -threshold || (isFast && self.deltaX < 0)) { self.go(1); } else if (self.deltaX > threshold || (isFast && self.deltaX > 0)) { self.go(-1); } self.startX = null; self.play(); // 手势结束恢复自动播放 });

阈值取 20% 是个经验值。取太小，用户想点一下按钮，手指抖了 10px 就翻页了；取太大，得滑大半屏才响应，感觉迟钝。快速轻扫的判断（250ms 内超过 30px）是给“甩”这个动作留的，两种情况叠加基本能覆盖真实使用。

4.4 封装成 jQuery 插件

前面所有逻辑散在函数里，调用方要自己new、自己传 DOM、自己维护实例，用起来很别扭。按 jQuery 插件规范收一下，调用方一行就够。

;(function ($) { 'use strict'; var DEFAULTS = { autoplay: true, interval: 3000, duration: 500, pauseOnHover: true, swipe: true, startIndex: 0, onChange: null }; function Carousel(el, options) { this.$root = $(el); this.opts = $.extend({}, DEFAULTS, options); this.timer = null; this.locked = false; this.currentIndex = this.opts.startIndex; this.init(); } Carousel.prototype.init = function () { /* 建结构、算宽度、绑事件、启动播放 */ }; Carousel.prototype.render = function (index, animate) { /* 见 3.2 */ }; Carousel.prototype.go = function (step) { /* 见 3.3 */ }; Carousel.prototype.play = function () { /* 见 4.1 */ }; Carousel.prototype.stop = function () { /* 见 4.1 */ }; /** * 销毁：清定时器、解绑事件、移除克隆节点 * 单页应用切换路由时必须调用，否则定时器会一直跑 */ Carousel.prototype.destroy = function () { this.stop(); clearTimeout(this._unlockTimer); this.$root.off('.carousel'); this.$dots.off('.carousel'); this.$track.off('.carousel').removeClass('is-animating'); this.$track.find('.is-clone').remove(); // 摘掉克隆，恢复原始 DOM $.removeData(this.$root[0], 'carousel'); }; $.fn.carousel = function (options) { var args = Array.prototype.slice.call(arguments, 1); return this.each(function () { var instance = $.data(this, 'carousel'); if (!instance) { $.data(this, 'carousel', new Carousel(this, options)); } else if (typeof options === 'string' && typeof instance[options] === 'function') { instance[options].apply(instance, args); } }); }; })(jQuery); // 调用方只需要这一行 $('#banner').carousel({ interval: 4000, duration: 600 });

注意duration传了 600，CSS 里写的是0.5s，两边对不上就会出问题：JS 以为动画 600ms，CSS 实际 500ms 就结束了，transitionend提前触发，兜底定时器又晚 100ms，锁的释放时机错位，快速连点时偶尔会漏掉一次点击。所以这两个值必须同步，要么把duration写进内联transition-duration，要么在文档里明确写清楚“改动画时长要同时改 CSS”。

destroy方法在单页应用里是刚需。路由切走之后组件不销毁，定时器还在跑，每 3 秒改一次已经不在文档里的元素样式，内存一点点涨上去，切回来再初始化一次，页面上就有两个定时器在打架。这类问题的特点是控制台没有任何报错，全靠翻代码找，属于典型的黑匣子故障。

5. 常见问题排查：轮播图最容易翻车的五个点

轮播组件的 bug 有个共同特征：现象都很直观，原因都藏在时序里。下面五条是实际项目里出现频率最高的，按现象、原因、解决三段写，方便对照排查。

5.1 视觉与动画类问题

现象：从最后一张切回第一张时，画面像录像带倒带一样整屏倒着滑回去。

原因：没有做首尾克隆，位移直接从前一屏归零到初始位置，浏览器老老实实把这个过程渲染成了一次长距离滑动。

解决：补上initTrack的克隆逻辑，并在transitionend里先removeClass('is-animating')再设transform。顺序反了的话，瞬移那一帧仍然带着过渡，现象和没做克隆几乎一样。

现象：复位瞬间画面闪一下，或者闪出半张图。

原因：slideWidth在窗口缩放后没有重算，仍然用旧宽度算位移；或者图片没加载完就初始化，宽度读到 0。

解决：在resize里重新取slideWidth并调render(currentIndex, false)立即对齐；初始化放在$(window).on('load')之后，或给<img>显式写上宽高。

5.2 交互与状态类问题

现象：连续快速点击右键，轮播图停在了一张不该停的图上，指示器高亮也跟着错位。

原因：动画进行中仍然接受了新的切换请求，currentIndex被连续改写，最终停在了克隆位或越界位置。

解决：加上locked标志，go入口直接 return；释放点放在transitionend和兜底定时器两处。指示器高亮统一走normalize，克隆位一律折算成真实索引。

现象：鼠标划过轮播图之后就再也不自动播放了。

原因：mouseenter停了定时器，mouseleave里的重启逻辑写了条件判断，而条件恰好不成立；或者事件绑了但没解绑，重复初始化后旧实例的stop覆盖了新实例的play。

解决：mouseleave里无条件调play()，把清旧定时器的活儿交给play内部；所有事件带.carousel命名空间，destroy时整体off。

5.3 性能与内存类问题

现象：页面待久了变卡，切到别的路由再切回来，控制台里的定时器日志还在刷。

原因：组件销毁时没有clearTimeout，也没有解绑事件，旧实例的闭包一直持有 DOM 引用。

解决：destroy里依次做四件事——停定时器、清兜底定时器、off('.carousel')、移除克隆节点并$.removeData。少做任何一件，泄漏就还在。

现象：标签页切到后台再切回来，轮播图点不动了。

原因：页面隐藏时 CSS 过渡被浏览器挂起，transitionend没有触发，locked一直是 true。

解决：加一个duration + 100毫秒的兜底setTimeout强制解锁，并监听visibilitychange，页面重新可见时先stop()再play()，把状态重置一遍。

6. 验收与答辩：用一张自检表和一段控制台脚本证明它真的能用

轮播图这种组件，答辩时最怕的不是被问实现细节，而是被问“你怎么知道它是好的”。光说“我试过了”说服力很弱，老师随手拖一下窗口大小、连点五下右键、把鼠标停在那儿不动，三个动作就能暴露出没做宽度重算、没加动画锁、悬停暂停失效。准备一张验收表和一段能在控制台直接跑的自检脚本，比现场反复演示管用得多。

自检脚本可以直接粘到控制台，一次性把关键状态打出来。答辩现场跑一遍，比讲十分钟原理更直观。

// 粘贴到控制台，检查轮播实例的关键状态是否正常 (function ($) { var $root = $('.carousel'); var inst = $root.data('carousel'); if (!inst) { console.warn('未取到实例，检查是否初始化或已被 destroy'); return; } console.table({ '真实张数': inst.realCount, 'DOM 节点数': $root.find('.carousel-item').length, // 应为 realCount + 2 '当前逻辑索引': inst.currentIndex, // -1 到 realCount '动画锁状态': inst.locked, // 稳定后应为 false '定时器存在': !!inst.timer, '单屏宽度': inst.slideWidth }); })(jQuery);

我会盯着DOM 节点数这一行看。它等于realCount + 2才说明克隆插对了；如果等于realCount，说明克隆没插上，无缝一定失效；如果大于realCount + 2，说明重复初始化了，页面上有两个实例在同时操作同一份 DOM，这时候任何诡异现象都解释得通。

还有个答辩时特别管用的小技巧：把duration临时改成 3000 毫秒，整个切换过程慢放三倍，肉眼能清楚看到克隆位那一步的瞬移。评委看到画面平滑过渡到克隆张、然后安静地变成真正的第一张、没有任何回扫，无缝这件事就不用再解释了。演示完记得改回去。

从那以后我每次交付带轮播的页面，不管工期多紧，destroy方法和那张自检表都强制走一遍。定时器泄漏这种问题在开发环境里几乎显现不出来，等到用户用上半天开始反馈“页面越用越卡”，排查成本已经是当初写这几行代码的几十倍。希望帮到你。

本文还有配套的精品资源，点击获取