简质朴现图片横向转动（鼠标指向遏制）

　　最近有几个伴侣一向在问笔者赛马灯的题目，着实在早年的教程中，猛火网曾经提到许多相同的结果，譬喻：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>
提醒：可修改儿女码再运行!

（编辑：河北网）

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