原生JS封装无缝轮播插件实现与使用指南
作者：小满时间：2026-10-24 11:16:52浏览：204
本文介绍基于原生JS和ES5语法封装的无缝轮播插件。该插件无需依赖CSS或HTML文件，但需遵循特定布局规则。通过获取DOM元素、传参及调用自动轮播方法，可快速实现无缝滚动效果。支持设置动画时间、鼠标悬停暂停、侧边及底部按钮点击交互等功能，适合初学者学习参考。
本文分享一个基于原生JavaScript封装的无缝轮播插件，供开发者参考。
功能说明：
该轮播程序完全使用原生JavaScript及ES5语法编写。代码中封装了相关API，使得开发者在引入该JS文件后，仅需在自身JS文件中添加少量代码，即可在网页中实现基础的无缝轮播效果。
基本使用流程包括：获取DOM元素数组、向轮播对象传递参数，以及调用轮播对象的自动轮播方法。
除了基础的定时器自动轮播功能外，该程序还支持配置过渡动画时间、设置鼠标移入元素时自动轮播暂停、点击左右侧边按钮触发轮播，以及点击下方按钮触发轮播等功能。
该程序不依赖额外的CSS或HTML文件，但要求你的CSS和HTML布局遵循特定的结构规则。
需要注意的是，该程序不支持曲线过渡速度。此外，在切换浏览器窗口后，有时会出现轮播图错乱的Bug，目前尚未找到确切原因。
该程序仅为一名初学者对无缝轮播函数的简单封装，仅供学习和参考使用。
下文除轮播核心代码外，还将提供完整的示例程序。
运行效果展示：
实现思路：
根据轮播方向确定所有轮播图元素的排列顺序。当当前轮播图到达所有轮播图的边界时，将相对方向上的最后一张轮播图瞬间移动到相应位置。这种方法实现轮播图所需的最少图片数量为3张。针对图片数量为1张或2张的情况，需单独处理：1张图片时，复制添加两张与原图相同的元素；2张图片时，需按顺序对当前图片进行复制添加。
编译环境：
Chrome 86.0.4240.183
代码实现：
slide.js 封装轮播图核心代码
(function(window, undefined) {
// 获取元素css属性值
function getCss(elem, attr) {
return elem.currentStyle ?
elem.currentStyle[attr] :
window.getComputedStyle(elem, null)[attr];
}
// 去除字符串中的非数字，不包括负号
function toInt(str) {
var rex = /[^0-9]/ig;
return Number((str[0] === '-' && str[1] !== '=') ? '-' + str.replace(rex, '') : str.replace(rex, ''));
}
// 封装动画函数，参数：dom对象、css属性值对象、动画执行时间、动画完成后回调
function animation(elem, params, speed, callback) {
for (var param in params) {
(function(param) {
var elemValue = toInt(getCss(elem, param)),
targetValue = toInt(params[param]),
currentDis = elemValue,
unit = params[param].substr(params[param].indexOf('[A-Za-z]+') - 1);
if (params[param].length > 2) {
var prefix = params[param].substr(0, 2);
if (prefix === '+=')
targetValue = elemValue + targetValue;
else if (prefix === '-=')
targetValue = elemValue - targetValue;
}
var dis = (targetValue - elemValue) / speed,
sizeFlag = targetValue < elemValue;
var timer = setInterval(function() {
elemValue = toInt(getCss(elem, param));
if (sizeFlag) {
if (currentDis <= targetValue) {
clearInterval(timer);
elem.style[param] = targetValue + unit;
} else {
currentDis += dis;
elem.style[param] = currentDis + unit;
}
}
else {
if (currentDis >= targetValue) {
clearInterval(timer);
elem.style[param] = targetValue + unit;
} else {
currentDis += dis;
elem.style[param] = currentDis + unit;
}
}
}, 1);
})(param);
}
if (typeof callback === 'function')
callback();
};
// 向右轮播数组移动
function rightRoundArrayMove() {
var winsLen = wins.length;
var lastWin = wins[winsLen - 1];
for (var i = winsLen - 1; i > 0; i--)
wins[i] = wins[i - 1];
wins[0] = lastWin;
}
// 向左轮播
function rightRound(time) {
rightRoundArrayMove();
wins.forEach(function(win, index) {
(index === 0) ?
win.style.left = index * winWidth - winWidth + 'px' :
animation(win, {left: '+=' + winWidth + 'px'}, time ? time : animationTime);
});
}
// 向右轮播
function leftRound(time) {
var winsLen = wins.length;
var firstWin = wins[0];
for (var i = 0; i < winsLen - 1; i++)
wins[i] = wins[i + 1];
wins[winsLen - 1] = firstWin;
wins.forEach(function(win, index) {
(index === wins.length - 1) ?
win.style.left = index * winWidth - winWidth + 'px' :
animation(win, {left: '-=' + winWidth + 'px'}, time ? time : animationTime);
});
}
var
// wins, btns, sbtns用于保存构造函数的参数
wins,
btns,
sbtns,
// 窗口的宽度
winWidth,
// 过渡动画时间(毫秒)，默认为100
animationTime = 100,
// 点击按钮轮播间隔
clickInterval = animationTime << 2,
// 保存自动轮播定时器、定时器间隔、是否向右轮播
autoRoundTimer,
qinterval,
qisRight,
// slide构造函数，参数：窗口数组，按钮数组，侧边按钮数组
slide = function(wins, btns, sbtns) {
return new slide.prototype.init(wins, btns, sbtns);
};
slide.prototype = {
// 初始化窗口元素
init: function(awins, abtns, asbtns) {
if (!awins)
throw new Error('The window array cannot be empty.');
wins = Object.values(awins), btns = abtns, sbtns = asbtns;
// 处理窗口少于3个的情况
if (wins.length === 1) {
var winParent = wins[0].parentNode;
var winHTML = wins[0].outerHTML;
winParent.innerHTML += winHTML + winHTML;
wins = Object.values(winParent.children);
}
else if (wins.length === 2) {
var winParent = wins[0].parentNode;
winParent.innerHTML += wins[0].outerHTML + wins[1].outerHTML;
wins = Object.values(winParent.children);
}
winWidth = wins[0].offsetWidth;
wins.forEach(function(win, index) {
win.style.position = 'absolute';
win.index = index;
});
rightRoundArrayMove();
wins.forEach(function(win, index) {
win.style.left = index * winWidth - winWidth + 'px';
});
},
// 设置过渡动画时间
setAnimationTime: function(time) {
animationTime = time;
clickInterval = animationTime << 2;
},
// 自动轮播，参数：轮播时间间隔、是否为向右轮播
autoRound: function(interval, isRight) {
autoRoundTimer = setInterval(function() {
isRight ? rightRound() : leftRound();
}, interval);
qinterval = interval;
qisRight = isRight;
},
// 侧边按钮点击，参数为侧边按钮元素数组，该参数可在构造函数中传递或现在传递
sideBtnClickRound: function(sabtns) {
var leftBtn = sabtns ? sabtns[0] : sbtns[0],
rightBtn = sabtns ? sabtns[1] : sbtns[1];
var isclick= true;
leftBtn.onclick = function () {
if(isclick) {
isclick= false;
rightRound();
setTimeout(function() {
isclick = true;
}, clickInterval);
}
};
rightBtn.onclick = function () {
if(isclick) {
isclick= false;
leftRound();
setTimeout(function() {
isclick = true;
}, clickInterval);
}
};
},
// 普通按钮点击，参数：普通按钮数组、回调
btnsClickRound: function(abtns, callback) {
var ibtns = abtns ? abtns : btns;
var isclick= true;
ibtns.forEach(function(btn, index) {
btn.onclick = function() {
if(isclick) {
isclick= false;
if (typeof callback === 'function')
callback(ibtns, btn, index);
var poor = index - wins[1].index;
var count = Math.abs(poor);
if (poor < 0) {
var absPoor = count;
var timer = setInterval(function() {
console.log((absPoor + 1))
rightRound(animationTime / (absPoor + 2));
if ((--count) === 0)
clearInterval(timer);
}, animationTime);
}
else if (poor > 0) {
var timer = setInterval(function() {
leftRound(animationTime / (poor + 2));
if ((--count) === 0)
clearInterval(timer);
}, animationTime);
}
setTimeout(function() {
isclick = true;
}, clickInterval << 1);
}
}
});
},
// 设置鼠标移入取消自动轮播，参数：移入的元素、移入元素回调、移出元素回调
setOverStop: function(box, overCallback, outCallback) {
box.onmouseover = function(e) {
clearInterval(autoRoundTimer);
if (typeof overCallback === 'function')
overCallback(e);
}
box.onmouseout = function(e) {
slide.prototype.autoRound(qinterval, qisRight);
if (typeof outCallback === 'function')
outCallback(e);
}
}
}
slide.prototype.init.prototype = slide.prototype;
window.slide = _slide = slide;
})(window);test.js 测试示例JS代码：
onload = function() {
var wins = document.querySelectorAll('.wins > li');
var btns = document.querySelectorAll('.btns > li');
var sideBtns = document.querySelectorAll('.side-btns > div');
var box = document.querySelector('.box');
var s = slide(wins, btns, sideBtns); // 创建轮播对象，参数：窗口dom数组、下方按钮dom数组（可选）、
s.autoRound(2000); // 设置自动轮播
s.setAnimationTime(200); // 设置过渡动画时间
s.setOverStop(box); // 设置鼠标移入元素时自动轮播停止，参数：移入的dom元素、移入元素回调、移出元素回调
s.sideBtnClickRound(); // 设置点击侧边按钮时轮播，参数：按钮dom数组（可选）
s.btnsClickRound(); // 设置下方按钮点击时轮播，参数：按钮dom数组（可选）、回调
}HTML与CSS示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
width: 1000px;
height: 400px;
margin: 20px auto;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.box > * {
position: absolute;
}
.side-btns {
width: inherit;
height: 100px;
display: flex;
justify-content: space-between;
z-index: 2;
}
.side-btns > div {
width: 50px;
height: inherit;
text-align: center;
line-height: 100px;
font-size: 18px;
background-color: rgba(0, 0, 0, .3);
color: white;
cursor: pointer;
user-select: none;
}
.btns {
width: inherit;
height: 20px;
display: flex;
justify-content: flex-end;
z-index: 2;
position: absolute;
bottom: 20px;
}
.btns > li {
width: 16px;
height: 16px;
border-radius: 50%;
margin-right: 12px;
cursor: pointer;
background-color: rgba(0, 0, 0, .2);
}
.wins {
width: inherit;
height: inherit;
display: flex;
}
.wins > li {
width: inherit;
height: inherit;
flex-grow:0;
flex-shrink:0;
}
</style>
<script src="js/slide.js"></script>
<script src="js/test.js"></script>
</head>
<body>
<div class="box">
<div class="side-btns">
<div class="left-btn"><</div>
<div class="right-btn">></div>
</div>
<ul class="btns">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="wins">
<li style="background-color: antiquewhite;">a</li>
<li style="background-color: aquamarine;">b</li>
<li style="background-color: green;">c</li>
<li style="background-color: brown;">d</li>
</ul>
</div>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
作者最新文章
JS空字符串、null和undefined转数字的结果是什么
2026-11-05 14:49:16
CodePen、JSFiddle与StackBlitz：主流JS在线编辑器对比
2026-11-05 13:38:29
JS怎么将时间戳转换为“刚刚”、“几分钟前”等相对时间
2026-11-05 12:55:14
JavaScript将儒略日逆向还原为公历日期时间的实现方法
2026-11-04 23:51:05
能在我的世界手机版直接修改JS代码吗
2026-11-04 19:02:53