Simple implementation code of recommendation for seamless scrolling

Principle:

1. Give ul an absolute positioning to detach it from the document stream, set left to 0, insert the picture into ul, and write a "move" function that enables left of ul to run to the right at a positive speed.

2. Set a timer so that the Move function executes every 30 (variable parameter) milliseconds

3. Because the length of ul "runs" out, you can double the content or img of ul at this time.

oUl.innerHTML +=oUl.innerHTML;

4. At this time, as content of ul increases, width of ul will also increase. The number of pictures displayed according to the actual project may change or be uncertain.

oUl.style.width = oLi.length*oLi[0].offsetWidth+'px';

5. Add code to the Move function.

5.1 At this point, ul moves to the right, judging when ul's offsetLeft > 0, pull ul "half the width of ul" to the left, that is, to enable ul to move directly and indefinitely to the right 1

if(oUl.offsetLeft>0){
     oUl.style.left = -oUl.offsetWidth/2+'px';
}

5.2 When ul moves to the left and its offsetLeft runs half the width of ul1, pull the entire ul back to its original left:0;

if (oUl.offsetLeft<-oUl.offsetWidth/2) {
      oUl.style.left = 0; 
}

Top Code:

html:

<div id="box">
    <ul>
      <li><a href="#"><img src="1.jpg" /></a></li>
      <li><a href="#"><img src="2.jpg" /></a></li>
      <li><a href="#"><img src="3.jpg" /></a></li>
      <li><a href="#"><img src="4.jpg" /></a></li>
    </ul>
 </div>

css:

* {margin: 0;padding: 0;}
   #box{ width: 480px; height: 110px; border: 1px red solid; margin: 100px auto;overflow: hidden; position: relative; }
   #box ul{ position: absolute; left: 0; top: 5px;}
   #box ul li{list-style: none; float: left; width: 100px; height: 100px; padding-left: 16px; }
   #box ul li img{width: 100px; height: 100px;}

js:

<script>
         window.onload = function(){
             var oDiv = document.getElementById('div1');
             var oUl = oDiv.getElementsByTagName('ul')[0];
             var oLi = oUl.getElementsByTagName('li');
             var aA = document.getElementsByTagName('a');
             var iSpeed = 10;      // Give Way ul Start with 1 Speed walk   
             
              oUl.innerHTML +=oUl.innerHTML;  
              oUl.style.width = oLi.length*oLi[0].offsetWidth+'px';  
                aA[0].onclick = function(){
                      iSpeed = -10;
               };
                aA[1].onclick = function(){
                      iSpeed = 10;
               };

               function fnMove(){
                   if (oUl.offsetLeft<-oUl.offsetWidth/2) {   // Negative number is because ul Of left Is negative   
                      * oUl.style.left = 0;
                       }

                   else if(oUl.offsetLeft>0){
                         oUl.style.left = -oUl.offsetWidth/2+'px';     
                      }                
                    
                     oUl.style.left = oUl.offsetLeft+iSpeed+'px';    // Whole ul Move right       
                  
               };

                 var timer = null;             
                 clearInterval(timer);
                 timer = setInterval(fnMove,30);

                 oUl.onmouseover = function(){
                    clearInterval(timer);
                 };
                 oUl.onmouseout = function(){
                    timer = setInterval(fnMove,30); // Execute this timer when the mouse moves away 

                 };
            
         };
      </script>

If there are any errors, please correct them.