This article describes the simple implementation of seamless scrolling effect of JS. Share it for your reference, as follows:
<!doctype html><title>javascript seamless scroll</title><meta charset="utf-8" /><meta name="keywords" content="javascript seamless scroll" /><meta name="description" content="javascript seamless scroll" /><style type="text/css"> h1 { font: 400 16px/1 "Microsoft YaHei", KaiTi_GB2312, SimSun } #marquee { position: relative; width: 400px; overflow: hidden; border: 10px solid #8080C0; } #marquee img { border: 0px; } #marquee dl, #marquee dt, #marquee dd, #marquee a { float: left; margin: 0; padding: 0; } #marquee dl { width: 1000%; height: 150px; }</style><script type="text/javascript">var Marquee = function(id) { try { document.execCommand("BackgroundImageCache", false, true); } catch(e) {}; var container = document.getElementById(id), original = container.getElementsByTagName("dt")[0], clone = container.getElementsByTagName("dd")[0], speed = arguments[1] || 10; clone.innerHTML = original.innerHTML; container.scrollLeft = clone.offsetLeft var rolling = function() { if(container.scrollLeft == 0) { container.scrollLeft = clone.offsetLeft; } else { container.scrollLeft--; } } var timer = setInterval(rolling, speed) //Set timer container.onmouseover = function() { clearInterval(timer) } //When the mouse moves to marquee, clear the timer and stop scrolling container.onmouseout = function() { timer = setInterval(rolling, speed) } //Reset the timer when the mouse moves away}window.onload = function() { Marquee("marquee");}</script><h1>javascript seamless scroll (scroll to the right)</h1><div id="marquee"> <dl> <dt> <a href="###"><img src="img/o_s017.jpg"/></a> <a href="###"><img src="img/o_s018.jpg"/></a> <a href="###"><img src="img/o_s018.jpg"/></a> <a href="###"><img src="img/o_s019.jpg"/></a> <a href="###"><img src="img/o_s020.jpg"/></a> <a href="###"><img src="img/o_s021.jpg"/></a> <a href="###"><img src="img/o_s022.jpg"/></a> <a href="###"><img src="img/o_s022.jpg"/></a> <a href="###"><img src="img/o_s022.jpg"/></a> <a href="###"><img src="img/o_s023.jpg"/></a> </dt> <dd></dd> </dl></div>The renderings are as follows:
For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript traversal algorithms and techniques", and "Summary of JavaScript mathematical operations usage"
I hope this article will be helpful to everyone's JavaScript programming.