Wiederholen der horizontalen automatischen Bildlaufleiste

Question

Ich habe ein automatisch scrollendes Balkenskript, das die Bilder nach rechts scrollen lässt. Ich möchte es nach dem Ende wiederholen. Bitte helfen Sie!

<div class="scrolls"> 
    <div> 
     <img src="img1" height="200"/> 
     <img src="img2" height="200"/> 
     <img src="img3" height="200"/> 
    </div>   
</div> 

<script> 
    $(document).ready(function() { 
     var sL = 4000; 
     $('.scrolls').animate({ 
      scrollLeft : sL 
     },100000, 'linear'); 

     $(".scrolls").on("click",function(){ 
       $(this).stop(true,false); 
     }); 

     $(".scrolls").on("mouseenter",function(){ 
      $(this).stop(true,false); 
     }); 

     $(".scrolls").on("mouseleave",function(){ 
      $(this).animate({ 
      scrollLeft : sL 
      },100000, 'linear'); 
     }); 
    }) 
    </script> 

Answer 1

Nehmen Sie eine ungeordnete Liste mit Listitem (HTML-Markup)

<div class="scrolls"> 
    <ul> 
     <li><img src="img1" height="200"/></li> 
     <li><img src="img2" height="200"/></li> 
     <li><img src="img3" height="200"/></li> 
    </ul> 
</div> 

Kopieren Sie dieses Listitem so können Sie zweimal den gesamten horizontalen Raum Fillup. Scrollen Sie jetzt das div nach rechts und jedes Mal, wenn ein Bild das div nach links verlässt, bewegen Sie es vom Anfang bis zum Ende.

// create as many copys as needed for filling the whole harizontal space twice 
var dummyClones = $('.scrolls > ul > li').clone(true); 
while($('.scrolls > ul').width() < 2*$('.scrolls').width()) 
    $('.scrolls > ul').append(dummyClones.clone(true)); 

Die Animation selbst durch window.requestAnimationFrame gelöst:

var animationSpeedInMiliseconds = 10000; // 10 seconds for 1000px 
function step(timestamp) { 
    if(!step.startTimestamp) step.startTimestamp = timestamp; 
    if(!step.stopped) { 
     let delta = timestamp - step.startTimestamp; 
     let pixelCountToShift = (delta/animationSpeedInMiliseconds) * 1000; 
     if($('.scrolls').scrollLeft()+pixelCountToShift > $('.scrolls > ul > li:eq(0)').width()) { 
      $('.scrolls > ul').append($('.scrolls > ul > li:eq(0)')); 
      $('.scrolls').scrollLeft($('.scrolls').scrollLeft()+pixelCountToShift-$('.scrolls > ul > li:eq(0)').width()); 
     } else { 
      $('.scrolls').scrollLeft($('.scrolls').scrollLeft()+pixelCountToShift); 
     } 
    } 
    step.startTimestamp = timestamp; 
    window.requestAnimationFrame(step); 
} 

Achtung: Es ist nicht perfekt. Es ist ein Beispiel, das ich in 4 Minuten erstellt habe und es soll als ein Proof-of-Concept verstanden werden. Kein Skript für den Produktionseinsatz.

jsfiddle: https://jsfiddle.net/Kasalop/tktfr4rz/2/