-1

I want to move a serie of images from right to left using javascript.

window.onload = function(){
    function move(){
        var speed = 500;
        var imgbox = document.getElementById("imgbox");
        imgbox.innerHTML += imgbox.innerHTML;
        var span = imgbox.getElementsByTagName("span");
        var timer = window.setInterval(marquee,speed);

        function marquee(){
            console.log(imgbox.scrollLeft);
            console.log(span[0].offsetWidth);
            if( imgbox.scrollLeft > span[0].offsetWidth){
                imgbox.scrollLeft = 0;
            }else{
                ++imgbox.scrollLeft;
                console.log("in else block");
                console.log(imgbox.scrollLeft);
                }
        }
    }
    move();
}
div{
    width: 933px;
    height: 129px;
    border: 1px solid red;
    overflow:hidden;
}
 <div id="imgbox">
    <span>
        <a href=""><img src="https://i.stack.imgur.com/b7J9w.jpg" alt=""></a>
        <a href=""><img src="https://i.stack.imgur.com/yh7YJ.jpg" alt=""></a>
        <a href=""><img src="https://i.stack.imgur.com/5uIog.jpg" alt=""></a>
        <a href=""><img src="https://i.stack.imgur.com/r5GCW.jpg" alt=""></a>
    </span>
</div>

When to open it with firefox, js run in else block ,why imgbox.scrollLeft can't increase?imgbox.scrollLeft keep value as 0 ,not increased as 1,2,3.......
How to fix my js or css ?

enter image description here

showkey
  • 482
  • 42
  • 140
  • 295

1 Answers1

2

Adding white-space: nowrap; to the style helps. With white-space option allowing text wrapping, there is no horizontal overflow, the element needs no horizintal scrolling, and .scrollLeft is automatically reset to 0. See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft, section Setting the value.

window.onload = function(){
    function move(){
        var speed = 50; // I made it faster.
        var imgbox = document.getElementById("imgbox");
        imgbox.innerHTML += imgbox.innerHTML;
        var span = imgbox.getElementsByTagName("span");
        var timer = window.setInterval(marquee,speed);

        function marquee(){
            console.log(imgbox.scrollLeft);
            console.log(span[0].offsetWidth);
            //                                    see UPD -v
            if( imgbox.scrollLeft > span[0].offsetWidth || imgbox.scrollLeft >= imgbox.scrollWidth - imgbox.clientWidth ){
                imgbox.scrollLeft = 0;
            }else{
                ++imgbox.scrollLeft;
                console.log("in else block");
                console.log(imgbox.scrollLeft);
                }
        }
    }
    move();
}
div{
    width: 933px;
    height: 129px;
    border: 1px solid red;
    overflow:hidden;
    white-space: nowrap; /* <-- */
}
<div id="imgbox">
    <span>
        <a href=""><img src="https://i.stack.imgur.com/b7J9w.jpg" alt=""></a>
        <a href=""><img src="https://i.stack.imgur.com/yh7YJ.jpg" alt=""></a>
        <a href=""><img src="https://i.stack.imgur.com/5uIog.jpg" alt=""></a>
        <a href=""><img src="https://i.stack.imgur.com/r5GCW.jpg" alt=""></a>
    </span>
</div>

UPD per @Jaromanda_X. There is a another problem with the author's code: the scrolling stops when imgbox.scrollLeft reaches 910, for

If specified as a value greater than the maximum that the content can be scrolled, scrollLeft is set to the maximum.

The maximum value of .scrollLeft is defined as .scrollWidth - .clientWidth (see https://stackoverflow.com/a/5704386/6632736). So, the condition for resetting .scrollLeft ought to be imgbox.scrollLeft > span[0].offsetWidth || imgbox.scrollLeft >= imgbox.scrollWidth - imgbox.clientWidth. Perhaps, it can be simplified.

Alexander Mashin
  • 3,892
  • 1
  • 9
  • 15