先将背景图的 url 存进一个数组，再通过改变background: url( ) 来实现伦比图效果。
HTML部分
<div id="box">
<!-- 上一张 -->
<div class="prev" id="prev">prev</div>
<!-- 下一张 -->
<div class="next" id="next">next</div>
<!-- 底部栏 -->
<ul>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
CSS部分
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 800px;
height: 500px;
margin: 50px auto;
background-repeat: no-repeat;
background-size: contain;
background-image: url(./images/00.jpg);
transition: all .8s;
position: relative;
}
.prev,
.next {
width: 60px;
height: 35px;
background-color: rgba(0, 0, 0, .2);
color: aliceblue;
text-align: center;
line-height: 35px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
cursor: pointer;
display: none;
user-select: none;
}
.next {
right: 0;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, .3);
}
/* 鼠标经过box时显示上一步和下一步 */
#box:hover>.prev,
#box:hover>.next {
display: block;
}
#box ul {
position: absolute;
bottom: 10px;
right: 5px;
}
ul li {
float: left;
list-style: none;
width: 15px;
height: 15px;
background-color: rgba(255, 50, 50, .6);
border-radius: 50%;
margin-right: 15px;
cursor: pointer;
}
.current {
background-color: rgba(255, 255, 0, 0.8);
}
</style>
JS部分
<script>
// 先将图片地址给到一个数组里
var arrimg = ["./images/00.jpg", './images/01.jpg', './images/02.jpg', './images/03.jpg', './images/04.jpg',
'./images/05.jpg'
];
// 获取元素
var box = document.getElementById("box");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var lis = box.children[2].children
console.log(lis);
// 给个初始索引值
var i = 0;
// 封装函数，实现下一张图且循环
function fn() {
// 判断当前是不是最后一张图
if (i < arrimg.length - 1) {
// 如果不是最后一张图，则索引+1 让下一张图显示
i++
box.style.backgroundImage = 'url(' + arrimg[i] + ')';
exclusive()
// console.log(i);
} else {
// 如果是最后一张图，让他变成第一张图渲染出来
i = 0
box.style.backgroundImage = 'url(' + arrimg[i] + ')';
exclusive()
// console.log(i);
}
};
// 给个定时器实现定时轮播效果
var timmer = setInterval(fn, 2000);
//鼠标经过box时 停止轮播
box.onmouseover = function () {
clearInterval(timmer);
timmer = null
}
//鼠标离开box时 继续轮播
box.onmouseout = function () {
if (timmer) {
clearInterval(timmer);
timmer = null
}
timmer = setInterval(fn, 2000);
}
// 给下一张注册点击事件
next.onclick = function () {
// 并且使用之前封装的函数，渲染出下一张
fn()
}
// 上一张注册点击事件
prev.onclick = function () {
// 直接让索引-1
i--;
// 判断当前的i是不是第一张
if (i >= 0) {
// 渲染出上一张的图
box.style.backgroundImage = 'url(' + arrimg[i] + ')';
exclusive()
} else {
// 如果当前是第0张， 自减后就是-1，这时让最后一张图渲染出来
i = arrimg.length - 1;
box.style.backgroundImage = 'url(' + arrimg[i] + ')';
exclusive()
}
}
// 给每个li注册点击事件
for (var j = 0; j < lis.length; j++) {
lis[j].setAttribute('index', j)
lis[j].onclick = function () {
clearInterval(timmer);
timmer = setInterval(fn, 2000);
// 将点击的li所对应的
i = this.getAttribute("index")
box.style.backgroundImage = 'url(' + arrimg[i] + ')';
exclusive()
}
}
// 排他思想封装函数 实现当前li高亮
function exclusive() {
for (let i = 0; i < lis.length; i++) {
lis[i].className = ""
}
lis[i].className = "current"
}
</script>
效果图：
