自动轮播，鼠标进入停止，离开轮播
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
li{
list-style: none;
}
.box{
width: 820px;
height: 380px;
margin: 30px auto;
overflow: hidden;
}
ul{
width: calc(820px * 5);
height: 340px;
background-color: black;
transition: 1s;
}
ul li{
float: left;
}
ul li img{
display: block;
}
.nav{
width: 100%;
height: 40px;
display: flex;
}
.nav div{
height: 40px;
flex: 1;
text-align: center;
line-height: 40px;
background-color: #e3e2e2;
cursor: pointer;
}
.nav .active{
background-color: white;
border-bottom: 2px solid #cea861;
}
</style>
</head>
<body>
<div class="box">
<ul id="wrap">
<li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20220729/a996ffd9672a002d411176cbf97e901e.jpeg" alt=""></li>
<li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20220729/c607f6fdc17f83f7ef0bf22b4b713af8.jpeg" alt=""></li>
<li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20220722/6e380c555ce2e06ba645d462960bc8f3.jpeg" alt=""></li>
<li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20220801/52306d5b47773e17c469ea2f30bd15af.jpeg" alt=""></li>
<li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20220801/3cd94d43d7f0994ae93c4efd1518f683.jpeg" alt=""></li>
</ul>
<div class="nav" id="navv">
<div class="active">星之守护者2022</div>
<div>时空召唤</div>
<div>星之守护者通行证</div>
<div>LPL夏季赛</div>
<div>星守璐璐 手办开售</div>
</div>
</div>
\
<script>
//获取元素
let navs=navv.getElementsByTagName('div')
let index=0
//开启定时器
let time=setInterval(fun1,1000)
//导航鼠标滑过效果
for(let n=0;n<navs.length;n++){
navs[n].index=n
navs[n].onmouseenter=function(){
clearInterval(time)
for(let j=0;j<navs.length;j++){
navs[j].className=""
}
this.className='active'
wrap.style.marginLeft=-this.index*820+"px"
index=this.index
}
navs[n].onmouseleave=function(){
time=setInterval(fun1,1000)
}
}
//自动轮播
let box=document.getElementById('wrap')
\
//关闭定时器
box.onmouseenter=function(){
clearInterval(time)
}
//打开定时器
box.onmouseleave=function(){
time=setInterval(fun1,1000)
}
\
//封装定时器
function fun1(){
if(index>=4){
index=0
}else{
index++
}
for(let j=0;j<navs.length;j++){
navs[j].className=""
}
navs[index].className='active'
wrap.style.marginLeft=-index*820+"px"
}
</script>
</body>
</html>
