先上效果图:
css:
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 1000px;
height: 130px;
border: 1px solid #000;
margin: 50px auto;
/* 溢出盒子的部分隐藏 */
overflow: hidden;
}
.box ul{
list-style: none;
width: 5000px;
position: relative;
}
.box ul li{
float: left;
margin-right: 10px;
}
img{
height: 130px;width: 200px;
}
</style>
html:
<div id="box" class="box">
<ul id="list">
<li><img src="images/1.jpeg" alt=""></li>
<li><img src="images/1.jpeg" alt=""></li>
<li><img src="images/1.jpeg" alt=""></li>
<li><img src="images/1.jpeg" alt=""></li>
<li><img src="images/1.jpeg" alt=""></li>
<li><img src="images/1.jpeg" alt=""></li>
</ul>
</div>
js:
<script>
var box = document.getElementById('box');
var list = document.getElementById('list');
//复制
list.innerHTML += list.innerHTML;
//全局变量,表示当前list的left值
var left = 0;
move();
//动画封装成函数
var timer;
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.onmouseleave = function(){
move();
}
</script>