直接上代码，有一定基础的人都可以看得懂，这里就不做过多的解释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js实现图片轮播</title>
<style>
div {
margin: 0;
padding: 0;
}
#box {
position: relative;
}
#box .anchor {
position: absolute;
width: 100%;
height: 570px;
background-repeat: no-repeat;
background-position: center top;
opacity: 0;
}
#control {
position: fixed;
width: 500px;
top: 530px;
left: 35%;
}
#control a {
font-size: 30px;
text-decoration: none;
font-weight: bolder;
color: white;
background-color: #5fa;
opacity: 0.7;
border-radius: 30px;
margin-left: 80px;
}
#box .anchor:target {
opacity: 1;
}
#box .anchor:nth-of-type(1) {
opacity: 1;
}
</style>
</head>
<body>
<div id="box">
<div>
<img id="anchor1" class="bgc-img1 anchor" src="b1.jpg">
<img id="anchor2" class="bgc-img2 anchor" src="b2.jpg">
<img id="anchor3" class="bgc-img3 anchor" src="b3.jpg">
</div>
<div id="control">
<a href="#anchor1">○</a>
<a href="#anchor2">○</a>
<a href="#anchor3">○</a>
</div>
</div>
<script>
// 使用js实现图片交替变化
var nodeNum = 3;
var idStrAhead = "anchor";
var sequenceArray = new Array();
for (var i = 0; i < nodeNum; i++) {
sequenceArray[i] = document.getElementById(idStrAhead + (i+1));
}
// 当前显示的图片在数组中的下标
var currIndex = 0;
setInterval(function() {
// 如果下标已经等于nodeNum了，表示已经超出数组范围，此时需要将下标设置为0
if (currIndex == nodeNum) {
currIndex = 0;
clearTransitionDelayAndPic(sequenceArray[nodeNum-1]);
} else if (currIndex != 0){
clearTransitionDelayAndPic(sequenceArray[currIndex-1]);
}
addTransitionDelayAndPic(sequenceArray[currIndex], 1.5)
currIndex++;
}, 1500);
// 清除延迟转变和图片样式
function clearTransitionDelayAndPic(obj) {
obj.style.transition = 0 + 's'; //清除照片的转变延迟
obj.style.opacity = 0;// 清除上一张图片
}
// 给图片添加转变延迟并且显示图片
function addTransitionDelayAndPic(obj, delay) {
obj.style.transition = delay + 's'; //添加照片的转变延迟
obj.style.opacity = 1;// 添加一张图片
}
</script>
</body>
</html>
