重复水平自动滚动条

Question

i have an auto scrolling bar script that makes the images scroll right. I want to make it repeat after reaching the end. Please help!

<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

Take an unordered list with listitems (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>

Copy this listitems so you can fillup the whole horizontal space twice. Now scroll the div to the right and everytime an image leaves the div to the left, move it from the beginning to the end.

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

The animation itself is solved through window.requestAnimationFrame :

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

Attention: It's not perfect. It's an example I created in 4 minutes and it's meant to be understood as an proof-of-concept. Not a script for productional use.

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