DOM 6-2无缝连续滚动特效，效果没出来
来源：6-2 无缝连续滚动特效
applefishfish
2022-01-13 23:04:00
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box {
width: 1100px;
height: 130px;
border: 1px solid #000000;
margin: 50px auto;
overflow: hidden;
}
.box ul{
list-style: none;
margin-left:10px;
}
.box ul li {
float:left;
position: relative;
}
.box ul li img {
width:200px;
height:130px;
margin-right:10px;
}
</style>
</head>
<body>
<div id ="box" class = "box">
<ul id="list">
<li><img src = "./images/banner1.jpg" ></li>
<li><img src = "./images/banner2.jpg"></li>
<li><img src = "./images/banner3.jpg" ></li>
<li><img src = "./images/banner4.jpg" ></li>
<li><img src = "./images/banner5.jpg" ></li>
</ul>
yy
</div>
<script>
var box = document.getElementById('box');
var list = document.getElementById('list');
list.innerHTML += list.innerHTML;
var left = 0;
var timer;
move();
function move(){
clearInterval(timer);
timer = setInterval(function(){
left-=4;
if(left <= -1260){
left = 0
}
list.style.left = left + 'px';
},20);
};
box.onmouseenter = function(){
clearInterval(timer);
};
box.onmouseenter = function(){
move();
};
老师，按照6-2 讲解，自己写了一下但是没出效果， 看不出哪里出了问题，能帮我检查一下吗？谢谢
1回答
-
好帮手慕小李
2022-01-14
同学你好，解答如下：
1、没有效果的原因是ul没给定位设置，如果没有定位设置，js是控制不了left的值的。
2、优化onmouseenter写重复了哈，猜想同学是想当鼠标移入的时候滚动停止，当鼠标移出的时候继续滚动。
ul的宽度老师没有改动，同学可按照课程中的思路去计算一下当移动到什么位置（数值时）滚动距离发生变化（left值）同学尝试理解一下，如有问题欢迎再提问，祝学习愉快！
0
相似问题