图片向左滚动(兼容火狐IE6)

来源:互联网 发布:数据挖掘工程师简历 编辑:程序博客网 时间:2024/05/17 23:13
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>图片向左滚动(兼容火狐IE6)</title> <script type="text/javascript"> function ScrollImgleft(){ var speed = 20; var scroll_div = document.getElementById("scroll_div"); var scroll_begin = document.getElementById("scroll_begin"); var scroll_end = document.getElementById("scroll_end"); scroll_end.innerHTML = scroll_begin.innerHTML; function Myquee(){ if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0) scroll_div.scrollLeft-=scroll_begin.offsetWidth; else scroll_div.scrollLeft++; } var MyMar = setInterval(Myquee,speed); scroll_div.onmouseover = function(){clearInterval(MyMar);} scroll_div.onmouseout = function(){MyMar = setInterval(Myquee,speed);} } </script> <style type="text/css"> body,div{ margin:0; padding:0} .scroll_div{ margin:0 auto; width:580px; height:62px; white-space: nowrap; overflow:hidden} .scroll_div img{margin:auto 8px; border:solid 1px #ccc; width:120px; height:60px; } .scroll_div li,.scroll_div ul,#scroll_begin,#scroll_end{ display:inline} </style></head><body> <div id="scroll_div" class="scroll_div"> <div id="scroll_begin"> <ul> <li><a href="#"><img src="http://www.1netmedia.net/images/main_logo.gif" /></a></li> <li><a href="#"><img src="http://www.1netmedia.net/images/main_logo.gif" /></a></li> <li><a href="#"><img src="http://www.1netmedia.net/images/main_logo.gif" /></a></li> <li><a href="#"><img src="http://www.1netmedia.net/images/main_logo.gif" /></a></li> <li><a href="#"><img src="http://www.1netmedia.net/images/main_logo.gif" /></a></li> <li><a href="#"><img src="http://www.1netmedia.net/images/main_logo.gif" /></a></li> <li><a href="#">dsjifjoewjofie</a></li> </ul> </div> <div id="scroll_end"></div> </div> <script type="text/javascript">ScrollImgleft();</script> </body> </html>

原创粉丝点击