JS简单实现无缝滚动效果实例

本文实例讲述了JS简单实现无缝滚动效果。分享给大家供大家参考，具体如下：

<！doctype html><title>javascript无缝滚动</title><meta charset="utf-8" /><meta name="keywords" content="javascript无缝滚动" /><meta name="description" content="javascript无缝滚动" /><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.offsetLeftvar rolling = function（） {if（container.scrollLeft == 0） {container.scrollLeft = clone.offsetLeft;} 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无缝滚动（向右滚动）</h1><div id="marquee"><dl><dt><a href="###"><img src="img/o_s017.jpg" alt="javascript无缝滚动"/></a><a href="###"><img src="img/o_s018.jpg" alt="javascript无缝滚动"/></a><a href="###"><img src="img/o_s019.jpg" alt="javascript无缝滚动"/></a><a href="###"><img src="img/o_s020.jpg" alt="javascript无缝滚动"/></a><a href="###"><img src="img/o_s021.jpg" alt="javascript无缝滚动"/></a><a href="###"><img src="img/o_s022.jpg" alt="javascript无缝滚动"/></a><a href="###"><img src="img/o_s023.jpg" alt="javascript无缝滚动"/></a></dt><dd></dd></dl></div>

效果图如下：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。