<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无缝滚动</title>
<style>
.box{
margin: 0 auto;
margin-top: 200px;;
width: 690px;
height: 120px;
overflow: hidden;
position: relative;
}
ul li{
list-style: none;
display: inline-block;
}
ul li img{
width: 157px;
height: 100px;
}
ul{
position: absolute;
}
</style>
</head>
<body>
<section class="box" id="box">
<ul id="us">
<li><img src="./img/timg.jpg" alt=""></li>
<li><img src="./img/timg.jpg" alt=""></li>
<li><img src="./img/timg.jpg" alt=""></li>
<li><img src="./img/timg.jpg" alt=""></li>
</ul>
</section>
</body>
</html>
<script>
//获取外盒子 一定相对定位 溢出的隐藏
let box=document.getElementById('box')
//获取us us一定是绝对定位
let us=document.getElementById('us')
//8个img
us.innerHTML+=us.innerHTML
//0.3秒动一次
setInterval(function () {
//每次移动-2px
us.style.left=us.offsetLeft-2+'px'
//如果us的left小于盒子的宽度的一半
if(us.offsetLeft<-us.offsetWidth/2){
//拉回0px
us.style.left='0px'
}
},30)
</script>
520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
