js实现图片无缝滚动
html部分,css样式自己脑补一下画面吧,效果如下,无缝滚动
<div class="box" id="box">
<ul>
<li><img src="images/01.jpg" alt=""></li>
<li><img src="images/02.jpg" alt=""></li>
<li><img src="images/03.jpg" alt=""></li>
<li><img src="images/01.jpg" alt=""></li>
<li><img src="images/02.jpg" alt=""></li>
<li><img src="images/03.jpg" alt=""></li>
</ul>
</div>
js部分:
var scroll = document.getElementById("box");
var ul = scroll.children[0];
var num = 0; //控制左侧值 left
var timer = null; // 定时器
timer = setInterval(autoPlay,20);
function autoPlay() {
num--;
//console.log(num); //输出的是所有的滚动的往左边移动的数
num<=-1200 ? num = 0 : num;
ul.style.left = num + "px";
}
scroll.onmouseover = function() { // 鼠标经过大盒子 停止定时器
clearInterval(timer);
}
scroll.onmouseout = function() {
timer = setInterval(autoPlay,20); // 开启定时器
}
自己这段时间开始整理的基础知识,如有错误欢迎指正