有点类似今日头条选项栏的逻辑
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tab选项卡</title>
<style>
ul,
.container {
padding: 0;
margin: 0;
}
.container {
height: 300px;
width: 400px;
}
ul {
list-style: none;
height: 40px;
line-height: 40px;
text-align: center;
display: flex;
background-color: #ccc;
}
ul li {
flex: 1;
border-right: 2px solid #eaedee;
cursor: pointer;
}
ul li:last-child {
border-right: none;
}
.container div {
height: 260px;
position: relative;
}
img {
width: 100%;
height: 100%;
position: absolute;
display: none;
}
.active-img {
display: block;
}
.active-txt {
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li class="active-txt">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div>
<img src="./images/1.jpg" alt="" class="active-img">
<img src="./images/2.jpg" alt="">
<img src="./images/3.jpg" alt="">
<img src="./images/4.jpg" alt="">
</div>
</div>
<script>
const liList = document.getElementsByTagName('li')
const imgList = document.getElementsByTagName('img')
let curIndex = 0
let timer = setInterval(move, 1500)
for (let i = 0, len = liList.length; i < len; i++) {
liList[i].addEventListener('mousemove', function () {
curIndex = i
clearClass()
this.classList.add('active-txt')
imgList[i].classList.add('active-img')
clearInterval(timer)
})
liList[i].addEventListener('mouseout', function(){
timer = setInterval(move, 1500)
})
}
function move(){
clearClass()
liList[curIndex].classList.add('active-txt')
imgList[curIndex].classList.add('active-img')
curIndex++
if(curIndex > 3) curIndex = 0
}
function clearClass() {
for (let li of liList) {
li.classList.remove('active-txt')
}
for (let img of imgList) {
img.classList.remove('active-img')
}
}
</script>
</body>
</html>
