JavaScript实现图片横向移动(转载) <script type="text/javascript" defer> var marquee_spd = 25; // 滚动速度,数值越小越快 var repeat = null; var obj_marquee = document.getElementById("ImgList");//本例中的<div id=ImgList> function marquee_init() { var obj_unit = obj_marquee.firstChild; var marquee_high = parseInt(obj_marquee.style.height); var marquee_wide = parseInt(obj_marquee.style.width); var unit_high = obj_unit.offsetHeight; var unit_wide = obj_unit.offsetWidth; var m = 0, n = 0, i = 0; var tmp = null; m = Math.ceil(marquee_wide / unit_wide); n = Math.ceil(marquee_high / unit_high); obj_unit.style.width = marquee_wide * (m + 1); obj_unit.rows[0].cells[0].style.width = obj_marquee.style.width; for(i = 0; i < m; i++) { tmp = obj_unit.rows[0].insertCell(-1); tmp.innerHTML = obj_unit.rows[0].cells[0].innerHTML; tmp.style.width = marquee_wide; tmp = null; } for(i = 0; i < n; i++) { obj_marquee.appendChild(obj_unit.cloneNode(true)); } return; } function marquee_show(direction) { switch(direction) { case "up": if(obj_marquee.scrollTop >= obj_marquee.children[1].offsetTop) { obj_marquee.scrollTop -= obj_marquee.firstChild.offsetHeight; } else { obj_marquee.scrollTop++; } break; case "down": if(obj_marquee.scrollTop <= 0) { obj_marquee.scrollTop += obj_marquee.firstChild.offsetHeight; } else { obj_marquee.scrollTop--; } break; case "left": if(obj_marquee.scrollLeft >= obj_marquee.firstChild.rows[0].cells[0].offsetWidth) { obj_marquee.scrollLeft -= obj_marquee.firstChild.rows[0].cells[0].offsetWidth; } else { obj_marquee.scrollLeft++; } break; case "right": if(obj_marquee.scrollLeft <= 0) { obj_marquee.scrollLeft += obj_marquee.firstChild.rows[0].cells[0].offsetWidth; } else { obj_marquee.scrollLeft--; } break; default: break; } return; } function marquee_doit() { var direction = ""; direction = obj_marquee.getAttribute("direction"); if(direction != null) marquee_show(direction); direction = obj_marquee.getAttribute("direction2"); if(direction != null) marquee_show(direction); return; } function startMove() { marquee_init(); repeat = setInterval("marquee_doit()", marquee_spd); obj_marquee.onmouseover = function() { clearInterval(repeat); } obj_marquee.onmouseout = function() { repeat = setInterval("marquee_doit()", marquee_spd); } } startMove(); </script> DIV代码: 图片列表 <div id="ImgList" direction="left" style="overflow:hidden;height:100px;700px"> <table width="1728" border="0" cellspacing="0" cellpadding="0" ID="Table1"> <tr> <td> <table cellspacing=0 cellpadding=0 border=0 align="center" ID="Table2"> <tbody> <tr> <td bordercolor=#ffffff width="102" height="108"> <div align="center"><a href="#" target="_blank"><img src="1.jpg" width=86 border="0" hspace=8></a><br> <img src="space.gif" width="3" height="3"><br> <font color="#0000CC" >图片1</font></div> </td> <td bordercolor=#ffffff width="102" height="108"> <div align="center"><a href="#" target="_blank"><img src="2.jpg" width=86 border="0" hspace=8></a><br> <img src="space.gif" width="3" height="3"><br> <font color="#0000CC" >图片2</font></div> </td> </tr> </tbody> </table> </td> </tr> </table> </div>