HTML部分只提供存放轮播图的容器,img标签等全部由js操作dom元素动态生成,样式部分也由js 完成
html代码部分
<!-- 创建存放轮播图片的容器 -->
<div id="banner"></div>
<!-- 引入轮播图插件 -->
<script src="./plugin/banner.js"></script>
<script>
createBannerArea(document.getElementById("banner"), [{
link: "https://baike.baidu.com/item/%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA/221450?fr=aladdin",
imgUrl: "./img/1.png"
}, {
link: "https://baike.baidu.com/item/%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA/221450?fr=aladdin",
imgUrl: "./img/2.png"
}, {
link: "https://baike.baidu.com/item/%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA/221450?fr=aladdin",
imgUrl: "./img/3.png"
}, {
link: "https://baike.baidu.com/item/%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA/221450?fr=aladdin",
imgUrl: "./img/4.png"
}, {
link: "https://baike.baidu.com/item/%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA/221450?fr=aladdin",
imgUrl: "./img/5.png"
}, {
link: "https://baike.baidu.com/item/%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA/221450?fr=aladdin",
imgUrl: "./img/6.png"
}, {
link: "https://baike.baidu.com/item/%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA/221450?fr=aladdin",
imgUrl: "./img/7.png"
}])
</script>
其中createBannerArea(ele,options)中,ele是指获取到的轮播图片的容器(dom元素),options是一个数组,数组的每一位为一个对象,存储点击图片时的跳转链接以及图片url地址。
js部分
function createBannerArea(areaDom, options) {
if (!options || options.length === 0) {
return;
}
//1. 定义变量
var imgArea = document.createElement("div"); //装图片的div
var numberArea = document.createElement("div"); //装角标的div
var curIndex = 0; //当前显示的索引
var autoTimer = null; //自动变化计时器
var autoRate = 3000; //自动变化间隔
//2. 初始化:
//2.1 初始化areaDom
areaDom.innerHTML = "";
areaDom.appendChild(imgArea);
areaDom.appendChild(numberArea);
//2.2 初始化图片区域
createImgArea();
//2.3 初始化角标区域
createNumberArea();
//2.4 设置显示状态
show(0);
//3. 自动变化
autoChange();
areaDom.addEventListener("mouseenter", function() {
clearInterval(autoTimer);
autoTimer = null;
})
areaDom.addEventListener("mouseleave", function() {
autoChange();
})
//创建图片区域
function createImgArea() {
imgArea.style.width = "100%";
imgArea.style.height = "100%";
imgArea.style.display = "flex";
imgArea.style.overflow = "hidden";
for (let item of options) {
var img = document.createElement("img");
img.src = item.imgUrl;
img.style.width = "100%";
img.style.height = "100%";
img.style.display = "block";
img.style.marginLeft = "0%";
img.style.cursor = "pointer";
img.addEventListener("click", function() {
if (item.link) {
location.href = item.link;
}
})
imgArea.appendChild(img);
}
}
//创建数字区域
function createNumberArea() {
numberArea.style.textAlign = "center";
numberArea.style.marginTop = "-30px";
for (var i = 0; i < options.length; i++) {
var span = document.createElement("span")
span.style.display = "inline-block";
span.style.width = "12px"
span.style.height = "12px"
span.style.background = "lightgray"
span.style.cursor = "pointer";
span.style.borderRadius = "50%";
span.style.margin = "0 5px";
(function(index) {
span.addEventListener("click", function() {
show(index);
})
})(i)
numberArea.appendChild(span);
}
}
//根据指定的索引,设置显示状态
function show(newIndex) {
curIndex = newIndex;
for (var i = 0; i < numberArea.children.length; i++) {
var num = numberArea.children[i];
var imgEle = imgArea.children[i];
if (i == curIndex) {
num.style.background = "#be926f";
imgEle.style.display = "block";
} else {
num.style.background = "lightgrey";
imgEle.style.display = "none";
}
}
}
//自动播放函数
function autoChange() {
if (autoTimer) {
return;
}
autoTimer = setInterval(function() {
if (curIndex === options.length - 1) {
show(0);
} else {
show(curIndex + 1);
}
}, autoRate)
}
}