<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
.max{
width: 400px;
height: 300px;
position: relative;
border-radius: 20px;
margin: 50px auto;
overflow: hidden;
border:1px solid #111;
box-shadow: -9px 9px 4px #666;
}
.container{
left: 0;
transition: 1s;
position: absolute;
width: 400px;
height: 300px;
display: flex;
}
img{
width: 100%;
}
ul{
bottom: 0;
left: calc(50% - 50px);
position: absolute;
list-style: none;
width: 100px;
height: 20px;
display: flex;
justify-content: space-between;
z-index: 999;
}
ul li{
width: 20%;
border-radius: 50%;
height: 100%;
background: rgba(175, 224, 142, .6);
}
.active{
background: rgba(175, 113, 142, .8);
}
</style>
<body>
<div class="max">
<div class="container">
<img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3104686528,572431609&fm=26&gp=0.jpg" alt="">
<img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2458227883,4095122505&fm=26&gp=0.jpg" alt="">
<img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2229864841,4232235061&fm=26&gp=0.jpg" alt="">
</div>
<ul>
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script>
let index=0,timer=0;
let c=document.querySelector('.container')
let imgs=document.querySelector('img');
let li_=document.querySelectorAll("li");
// 添加删除类，计算移动属性值
function addList(index){
document.querySelector('li.active').classList.remove('active');
c.style['left']=(index*-400)+'px';
li_[index].classList.add('active');
}
function run(){
// 计时器
timer=setInterval(function(){
index++;
if(index>2){
index=0;
}
addList(index);
},1000)
}
run();
for(let item in li_){
// 鼠标指针移动到
li_[item].onmouseenter=function(){
clearTimeout(timer)
addList(item);
}
// 鼠标指针移出
li_[item].onmouseleave=function(){
run();
}
}
</script>
</html>
网友评论