js 实现图片无限横向滚动效果

Posted 2020-10-04 我要成为酷酷的人

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();