CSS代码如下：
*{ margin: 0; padding:0;}.scroll_box { width:100%; height:110px;margin:0;overflow: hidden;white-space: nowrap;}.scroll_box img {width: 310px; height: 110px; max-width: 100%; max-height: 100%;}#scroll_start, #scroll_end, #scroll_start ul, #scroll_end ul, #scroll_start ul li, #scroll_end ul li{display: inline;}HTML代码如下：
<div id="scroll_box" class="scroll_box"> ???<div id="scroll_start"> ????????<ul> ????????????<li><a href="#"><img src="img/SD_1.jpg"></a></li> ????????????<li><a href="#"><img src="img/SD_2.jpg"></a></li> ????????????<li><a href="#"><img src="img/SD_3.jpg"></a></li> ????????????<li><a href="#"><img src="img/SD_4.jpg"></a></li> ????????????<li><a href="#"><img src="img/SD_5.jpg"></a></li> ????????????<li><a href="#"><img src="img/SD_6.jpg"></a></li> ????????</ul> ???</div> ???<div id="scroll_end"></div></div>
JS代码如下：
function returnId(id){ ???return document.getElementById(id);}function ScrollImgLeft(){ ???var speed=10, ???????scroll_begin = returnId("scroll_begin"), ???????scroll_end = returnId("scroll_end"), ???????scroll_div = returnId("scroll_div"); ???????scroll_end.innerHTML=scroll_begin.innerHTML; ???function Marquee(){ ???????if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0){ ???????????scroll_div.scrollLeft-=scroll_begin.offsetWidth; ???????} ???????else{ ???????????scroll_div.scrollLeft++; ???????} ???} ???var MyMar=setInterval(Marquee,speed); ???scroll_div.onmouseover=function(){ ????????clearInterval(MyMar); ???} ???scroll_div.onmouseout=function(){ ????????MyMar=setInterval(Marquee,speed); ???}} ???ScrollImgLeft();js 实现图片无限横向滚动效果
原文地址：http://www.cnblogs.com/CooLLYP/p/7436066.html