內聯塊元素的純javascript水平字幕

Question

我正在使用內聯塊元素製作字幕。 目前，我的問題是以有效的方式實現無限滾動。 滾動的結尾是這樣的：

和起始位置是：

但我需要實現無限的效果。我不知道如何去做這件事，通過交換內部元素或其他東西。

你能幫我解釋一下這個小小的項目嗎？

作爲參考，這是結束位置768,16如何看起來像：

的代碼很簡單（See CodePen here）：

HTML

<div class="viewport" id="viewport"> 
    <div class="wrapper" id="wrapper"> 
    <div class="item">1</div><div 
    class="item">2</div><div 
    class="item">3</div><div 
    class="item">4</div><div 
    class="item">5</div><div 
    class="item">6</div><div 
    class="item">7</div><div 
    class="item">8</div><div 
    class="item">9</div><div 
    class="item">10</div> 
    </div> 
</div> 

CSS

.viewport { 
    position:  relative; 
    margin:  0 auto; 
    padding:  20px 0; 
    width:   200px 
} 
.wrapper { 
    position:  relative; 
    display:  inline-block; 
    white-space: nowrap; 
    transition: 0.8s ease-in-out all; 
} 
.item { 
    display:  inline-block; 
    width:   25px; 
    height:  25px; 
} 

個

JS

var scroller = document.getElementById('wrapper'); 

function start() { 
    for (var i = 0; 
     i < scroller.children.length; 
     i++) { 

    (function(j) { 
     var timeout = 1000*j; 
     setTimeout(function() { 

     var left = -scroller.children[j].offsetWidth * j, 
      leftPx = left + 'px'; 

     scroller.style.left = leftPx; 

     }, timeout) 
    })(i); 
    } 
} 
start(); 

Answer 1

我會假設你想知道如何保持持續的功能，而不是如何動畫回來。在開始結束時調用函數MyFunction();，並在該調用結束時調用start。例如：

var scroller = document.getElementById('wrapper'); 

function start() { 
    for (var i = 0; 
     i < scroller.children.length; 
     i++) { 

    (function(j) { 
     var timeout = 1000*j; 
     setTimeout(function() { 

     var left = -scroller.children[j].offsetWidth * j, 
      leftPx = left + 'px'; 

     scroller.style.left = leftPx; 

     }, timeout) 
    })(i); 
    } 
    MyFunction(); 
} 

// Reverse function here 
start(); 

或者，您可以使用<marquee>標籤，而不是這一切的腳本。