原生Js实现图片无缝滚动
废话少说，直接上代码：
<!doctype html> <title>javascript无缝滚动 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript无缝滚动 by 司徒正美" /> <meta name="description" content="javascript无缝滚动 by 司徒正美" /> <base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/"> <style type="text/css"> h1 { font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun } #marquee { position:relative; width: 400px; overflow:hidden; border: 10px solid #B45B3E; } #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; var rolling = function(){ if(container.scrollLeft == clone.offsetLeft){ container.scrollLeft = 0; }else{ container.scrollLeft++; } } var timer = setInterval(rolling,speed)//设置定时器 container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器 } window.onload = function(){ Marquee("marquee"); } </script> <h1>javascript无缝滚动(向左滚动) by 司徒正美</h1> <div id="marquee"> <dl> <dt> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s017.jpg" alt="javascript无缝滚动 by 司徒正美"/></a> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s018.jpg" alt="javascript无缝滚动 by 司徒正美"/></a> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s019.jpg" alt="javascript无缝滚动 by 司徒正美"/></a> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s020.jpg" alt="javascript无缝滚动 by 司徒正美"/></a> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s021.jpg" alt="javascript无缝滚动 by 司徒正美"/></a> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s022.jpg" alt="javascript无缝滚动 by 司徒正美"/></a> <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s023.jpg" alt="javascript无缝滚动 by 司徒正美"/></a> </dt> <dd></dd> </dl> </div>
原文：http://www.cnblogs.com/rubylouvre/archive/2009/10/01/1577219.html
