首页 > 代码库 > js实现图片无缝滚动
js实现图片无缝滚动
html部分,css样式自己脑补一下画面吧,效果如下,无缝滚动
<div class="box" id="box">
<ul>
<li><img src=http://www.mamicode.com/"images/01.jpg" alt=""></li>
<li><img src=http://www.mamicode.com/"images/02.jpg" alt=""></li>
<li><img src=http://www.mamicode.com/"images/03.jpg" alt=""></li>
<li><img src=http://www.mamicode.com/"images/01.jpg" alt=""></li>
<li><img src=http://www.mamicode.com/"images/02.jpg" alt=""></li>
<li><img src=http://www.mamicode.com/"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); // 开启定时器
}
自己这段时间开始整理的基础知识,如有错误欢迎指正
js实现图片无缝滚动
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。