首页 > 代码库 > JS 无缝滚动 走马灯
JS 无缝滚动 走马灯
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style>* { margin:0; padding:0; }#demo { overflow: hidden; /* 必须加上 hideen 才能滚动*/ width: 840px; margin:50px auto; }#demo img { border: 1px solid red; margin-right: 20px; }#indemo { float: left; width: 800%; border:1px dashed #000; }#demo1 { float: left; }#demo2 { float: left; }</style></head><body><div id="demo"> <div id="indemo"> <div id="demo1"> <a href="###"><img src="1.jpg" width="100" height="80" border="0" /></a> <a href="###"><img src="1.jpg" width="100" height="80" border="0" /></a> <a href="###"><img src="1.jpg" width="100" height="80" border="0" /></a> <a href="###"><img src="1.jpg" width="100" height="80" border="0" /></a> <a href="###"><img src="1.jpg" width="100" height="80" border="0" /></a> <a href="###"><img src="1.jpg" width="100" height="80" border="0" /></a> </div> <div id="demo2"></div> </div></div><script> var speed = 15; var tab = document.getElementById("demo"); var tab1 = document.getElementById("demo1"); var tab2 = document.getElementById("demo2"); tab2.innerHTML = tab1.innerHTML; function Marquee() { if (tab2.offsetWidth - tab.scrollLeft <= 0) tab.scrollLeft -= tab1.offsetWidth; else { tab.scrollLeft++; } } var MyMar = setInterval(Marquee, speed); tab.onmouseover = function () { clearInterval(MyMar) }; tab.onmouseout = function () { MyMar = setInterval(Marquee, speed) };</script></body></html>
obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型，单位像素。
scrollLeft就是指横向滚动条滚动后，左边不可见的那部分的宽度
JS 无缝滚动 走马灯
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。