本文详细介绍如何使用原生JavaScript制作一个轻量级的自适应轮播图插件。通过简单的HTML结构配置和JS函数调用，传入DOM元素及包含图片链接与跳转地址的对象数组，即可实现自动切换、角标显示及手动点击功能。代码包含完整的初始化逻辑与定时器控制，无需依赖第三方库，适合前端开发者快速集成到项目中。
原生JavaScript实现自适应轮播图插件
本文分享了一个使用原生JavaScript编写的轮播图插件的具体实现代码，供读者参考学习。
在实际调用时，只需在HTML中创建一个DIV容器即可使用。
以下是调用该插件时所需的JavaScript配置部分说明。
第一个参数用于指定轮播图显示的目标区域（即指定的DIV元素）。
第二个参数是一个数组，其中每个元素代表一张图片及其对应的点击跳转链接。
接下来直接展示相关代码实现。
HTML结构配置
HTML结构部分
<div id="banner"></div>在HTML文档的<script>标签内配置轮播图参数。该函数接收两个参数：第一个是显示轮播图的DIV元素，第二个是配置数组。数组中的每个对象包含两个属性：imgUrl用于指定图片地址，link用于指定点击图片后的跳转链接。
数组中的每个元素对应一张图片，数量不限，插件会自动适应图片数量进行布局。
<script>
bannerArea(document.getElementById("banner"),[
{imgUrl:"图片",
link:"跳转链接"
},
{imgUrl:"图片",
link:"跳转链接"
},
{imgUrl:"图片",
link:"跳转链接"
}
])
</script> JavaScript插件核心代码
以下是JavaScript插件的核心代码部分。
// 两个参数，第一个轮播图区域，第二个是配置
function bannerArea(areaDom, options) {
var imgArea = document.createElement("div");
var numberArea = document.createElement("div");
var curIndex = 0;//第几张轮播图
var changeTimer = null;
var changeDuration = 1000;//间隔
var timer = null;
initImg();//创建一个区域来显示图片
initNumber();//创建区域显示角标
setStatus();//设置状态
autoChange();//自动切换
//下面是局部函数
//创建图片，并且设置样式
function initImg() {
imgArea.style.width = "100%";
imgArea.style.height = "100%";
imgArea.style.display = "flex";
imgArea.style.overflow = "hidden";
for (let i = 0; i < options.length; i++) {
var obj = options[i];
var img = document.createElement("img");
img.src = obj.imgUrl;
img.style.width = "100%";
img.style.height = "100%";
img.style.margin = "0";
img.addEventListener("click", function () {
location.href = options[i].link;
})
imgArea.appendChild(img);
}
imgArea.addEventListener("mouseenter", function () {
clearInterval(changeTimer);
changeTimer = null;
})
imgArea.addEventListener("mouseleave", function () {
autoChange();
})
areaDom.appendChild(imgArea);
}
//创建角标元素和设置样式
function initNumber() {
numberArea.style.textAlign = "center";
numberArea.style.marginTop = "-25px";
for (let i = 0; i < options.length; i++) {
var sp = document.createElement("span");
sp.style.width = "12px";
sp.style.height = "12px";
sp.style.background = "lightgray";
sp.style.display = "inline-block";
sp.style.margin = "0 7px";
sp.style.borderRadius = "50%";
sp.style.cursor = "pointer";
sp.addEventListener("click", function () {
curIndex = i;
setStatus();
})
numberArea.appendChild(sp);
}
areaDom.appendChild(numberArea);
}
//设置角标区域状态
function setStatus() {
//设置圆圈的背景颜色
for (var i = 0; i < options.length; i++) {
if (i === curIndex) {
//设置背景颜色为选择
numberArea.children[i].style.background = "rgb(222 57 57)";
} else {
//非选择
numberArea.children[i].style.background = "lightgray";;
}
}
//显示图片
var start = parseInt(imgArea.children[0].style.marginLeft);
var end = curIndex * -100;
var dis = end - start;
var duration = 500;
var speed = dis / duration;
if (timer) {
clearInterval(timer);
}
timer = setInterval(function () {
start += speed * 20;
imgArea.children[0].style.marginLeft = start + "%";
if (Math.abs(end - start) < 1) {
imgArea.children[0].style.marginLeft = end + "%";
clearInterval(timer);
}
}, 20)
}
//自动切换
function autoChange() {
if (changeTimer) {
return;
}
changeTimer = setInterval(function () {
if (curIndex === options.length - 1) {
curIndex = 0;
} else {
curIndex++;
}
setStatus();
}, changeDuration)
}
}轮播图的切换速度（即图片间隔时间）可以在插件代码中通过修改变量 changeDuration = 1000; 的值来调整，单位为毫秒。
以上就是原生JS轮播图插件的完整实现内容，希望能为读者的学习提供有益帮助，欢迎继续支持本站获取更多技术资源。