<div id="outer">
<!-- 添加轮播图左箭头 -->
<button id="prev">
<i class="fas fa-angle-left"></i>
</button>
<ul id="imgList">
<li>
<a href="#"><img src="./img/01.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="./img/02.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="./img/03.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="./img/04.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="./img/05.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="./img/06.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="./img/07.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="./img/08.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="./img/01.jpg" alt="" /></a>
</li>
</ul>
<!-- 添加轮播图右箭头 -->
<button id="next">
<i class="fas fa-angle-right"></i>
</button>
<!-- 添加导航点 -->
<div id="navDiv">
<a class="navs" href="javascript:;"></a>
<a class="navs" href="javascript:;"></a>
<a class="navs" href="javascript:;"></a>
<a class="navs" href="javascript:;"></a>
<a class="navs" href="javascript:;"></a>
<a class="navs" href="javascript:;"></a>
<a class="navs" href="javascript:;"></a>
<a class="navs" href="javascript:;"></a>
</div>
</div>
css样式
#outer {
width: 610px;
height: 470px;
position: relative;
top: 10px;
left: 0;
overflow: hidden;
}
#imgList {
list-style: none;
position: absolute;
left: 0;
}
#imgList li {
float: left;
margin: 0 10px;
}
#imgList img {
width: 590px;
height: 470px;
}
/* 设置轮播图箭头 */
#prev {
position: absolute;
width: 25px;
height: 35px;
line-height: 35px;
left: 10px;
background-color: rgba(0, 0, 0, 0.15);
font-size: 16px;
color: rgb(240, 231, 231);
border: none;
outline: none;
z-index: 9998;
top: 50%;
border-top-right-radius: 18px;
border-bottom-right-radius: 18px;
}
#prev:hover {
background-color: rgba(0, 0, 0, 0.4);
}
#next {
position: absolute;
width: 25px;
height: 35px;
line-height: 35px;
background-color: rgba(0, 0, 0, 0.15);
font-size: 16px;
color: rgb(240, 231, 231);
border: none;
outline: none;
z-index: 9998;
margin-top: 220px;
left: 575px;
border-top-left-radius: 18px;
border-bottom-left-radius: 18px;
}
#next:hover {
background-color: rgba(0, 0, 0, 0.4);
}
/* 设置导航点 */
#navDiv {
position: absolute;
bottom: 22px;
margin-left: 30px;
z-index: 9999;
float: left;
}
#navDiv a {
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 4px;
background-clip: content-box;
border: 3px rgba(255, 255, 255, 0.4) solid;
background-color: rgba(109, 106, 106, 0.4);
}
#navDiv a:hover {
border: 3px solid rgba(255, 255, 255, 0.2);
background-color: white;
}
#navDiv .active {
border: 3px solid rgba(255, 255, 255, 0.2);
background-color: white;
}
js样式
window.onload = function () {
setInterval("show()", 1000);
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var imgList = document.getElementById("imgList");
var img = document.getElementsByTagName("img")[2];
var imgArr = [
"./img/01.jpg",
"./img/02.jpg",
"./img/03.jpg",
"./img/04.jpg",
"./img/05.jpg",
"./img/06.jpg",
"./img/07.jpg",
"./img/08.jpg",
"./img/01.jpg",
];
imgList.style.width = 610 * imgArr.length + "px";
var index = 0;
var allA = document.getElementsByClassName("navs");
allA[index].style.backgroundColor = "#FFF";
for (var i = 0; i < allA.length; i++) {
allA[i].num = i;
allA[i].onclick = function () {
clearInterval(timer);
index = this.num;
//切换图片
imgList.style.left = -610 * index + "px";
setA();
move(imgList, "left", -610 * index, 40, function () {
//动画执行完毕,开启自动切换
autoChange();
});
};
}
autoChange();
function setA() {
if (index >= imgArr.length - 1) {
index = 0;
imgList.style.left = 0;
}
for (var i = 0; i < allA.length; i++) {
allA[i].style.backgroundColor = "";
}
allA[index].style.backgroundColor = "#FFF";
}
var timer;
function autoChange() {
timer = setInterval(function () {
index++;
index %= imgArr.length;
move(imgList, "left", -610 * index, 20, function () {
setA();
});
}, 2000);
}
prev.onclick = function () {
clearInterval(timer);
index--;
if (index < 0) {
index = imgArr.length - 1;
}
img.src = imgArr[index];
setA();
move(imgList, "left", -610 * index, 40, function () {
autoChange();
});
};
next.onclick = function () {
clearInterval(timer);
index++;
if (index > imgArr.length - 1) {
index = 0;
}
img.src = imgArr[index];
setA();
move(imgList, "left", -610 * index, 40, function () {
autoChange();
});
};
};
效果