I. principle

The black box is the area where the final rolling image is displayed, and the green box is its sub container, whose width is larger than the black outer box, so that the image rolling can be realized by setting the scrollLeft of the black box. The innermost blue box is used to wrap all the scrolling images, while the content of the purple box will be the same as the blue box in the future to achieve seamless image scrolling Through JS timer, change the value of scrollLeft attribute of black box every certain time, make the image scroll to the left, and judge the value of scrollLeft. If the value reaches the rightmost side of black box container, it means that the blue box has rolled out the black box to the left, and the purple box is just inside the black box. At this point, you need to set the scrollLeft value of the black box to 0 and start again.

Two, code

1.html code

<!\-\- Outermost box --\> 
<div id="box"> 
	<div id="boxin"> 
		<div id="neirong"> 
			<img src="Images/C_2.jpg" alt=""> 
			<img src="Images/C_3.jpg" alt=""> 
			<img src="Images/C_4.jpg" alt=""> 
			<img src="Images/C_5.jpg" alt=""> 
			<img src="Images/C_6.jpg" alt=""> 
		</div> 
		<div id="neirong2"></div> 
	</div> 
</div> 

2.CSS code

	*{
		margin: 0; 
		padding: 0; 
	} 
	#box{ 
		height: 100px; 
		width: 500px; 
		overflow: hidden; 
	} 
	#boxin{ 
		width: 1064px; 
		height: 100px; 
	}
    #neirong{
        float: left;
    }
    #neirong2{
        float: left;
    }
    img{
        width: 100px;
        height: 100px;
    }
</style>

3.JS code

<script>
        var timer;
        var speed=10;
        var box=document.getElementById("box");
        var boxin=document.getElementById("boxin");
        var neirong=document.getElementById("neirong");
        var neirong2=document.getElementById("neirong2");
        neirong2.innerHTML=neirong.innerHTML;

        function move(){
            if(neirong2.scrollWidth-box.scrollLeft<=0){
                box.scrollLeft=0;
            }else{
                box.scrollLeft++;
            }            
        }
        box.onmouseover=function(){
            clearInterval(timer);
        }
        box.onmouseout=function(){
            timer=setInterval(move,speed);
        }
        timer=setInterval(move,speed);
    </script>