js 實現圖片無限橫向滾動效果

標籤：mouseover   seo   動效   無限   line   document   nbsp   cti   isp   

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 實現圖片無限橫向滾動效果