简单实现图片横向滚动（鼠标指向停止）

　　最近有几个朋友一直在问笔者跑马灯的问题，其实在以前的教程中，烈火网曾经提到很多类似的效果，例如：Marquee实现向上滚动文字[鼠标指向停止]、多列文字上下循环滚动 鼠标指向停止、可以控制的友情链接图片横向滚动代码和JS实现图片无间隙滚动等。今天再给大家分享一个图片的滚动展示，HTML部分使用了Table表格，有时间的朋友自己改成DIV+CSS吧

　　代码效果如下：

<div id="demon" style="overflow: hidden; width: 810px; background-color: #FFFFFF;"> <table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <td id="demon1" valign="top"> <table cellspacing="0" cellpadding="0" width="810" border="0"> <tr> <td> <a href="" target="_blank"> <img src="http://www.veryhuo.com/uploads/allimg/081207/1750200_lit.jpg" width="160" height="106" class="tu" border="0" /> </a> </td> <td> <a href="" target="_blank"> <img src="http://www.veryhuo.com/uploads/allimg/080919/1456250_lit.jpg" width="160" height="106" class="tu" border="0" /> </a> </td> <td> <a href="" target="_blank"> <img src="http://www.veryhuo.com/uploads/litimg/080719/21430926402.jpg" width="160" height="106" class="tu" border="0" /> </a> </td> <td> <a href="" target="_blank"> <img src="http://www.veryhuo.com/uploads/userup/0907/02114454Jb_lit.jpg" width="160" height="106" class="tu" border="0" /> </a> </td> <td> <a href="" target="_blank"> <img src="http://www.veryhuo.com/uploads/allimg/080726/1925170_lit.jpg" width="160" height="106" class="tu" border="0" /> </a> </td> </tr> </table> </td> 　　　　　　　　　　<td id="demon2"></td> </tr> </table> </div> <script type="text/javascript"> var speed1=30　　//控制速度，数越多速度越慢 demon2.innerHTML=demon1.innerHTML function Marquee() { if(demon.scrollLeft>=demon1.scrollWidth) { demon.scrollLeft=0 } else{ demon.scrollLeft++ } } var MyMar=setInterval(Marquee,speed1) demon.onmouseover=function() {clearInterval(MyMar)} demon.onmouseout=function() {MyMar=setInterval(Marquee,speed1)} </script><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：宣城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!