<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box {
border: 1px solid #333333;
width: 800px;
overflow: hidden;/*超出部分隐藏*/
position: relative;
height: 200px;
}
.list{
display:flex;
position: absolute;
left: 0px;
}
.list div{
display: flex;
justify-content: center;/*行距中*/
align-items: center;/*列居中*/
width: 200px;
height: 200px;
background-color: #DB7093;
margin-left: 2px;
margin-right: 2px;
font-size: 60px;
}
</style>
<script type="text/javascript">
// 函数入口点
function load(){
var list=document.querySelector('.list')
var box=document.querySelector('.box');
list.innerHTML+=list.innerHTML //复制长度为两倍
let left=list.style.left; //为list的左距离
let timer;//为定时器
// 移动函数 每次-2如果到达第二次的第一个div贴近list的情况下将会left==0，类似于障眼法。
function move(){
clearInterval(timer);
// 定时器开启部分
timer=setInterval((env)=>{
left=left-2;
console.log(list.clientLeft);
if(left==-(6*200+6*4)){ //指的是每个宽度200有6个加上我的margin宽度
left=0;
}
list.style.left=left+'px';
},20);
}
move();
//鼠标放入清楚计时器停止
box.addEventListener('mouseenter',()=>{
clearInterval(timer);
});
// 鼠标移出执行一遍定时器继续移动
box.onmouseleave=function(){
move();
};
};
document.addEventListener('DOMContentLoaded',load);
</script>
</head>
<body>
<div class="box">
<div class="list">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div class="six_div">6</div>
</div>
</div>
</body>
