javascript - 内联 block 元素的纯 javascript 水平选取框

Question

我正在使用内联 block 元素制作选取框。目前，我的问题是以有效的方式实现无限滚动。卷轴的结尾看起来像这样:

开始位置是:

但我需要实现无限效果。我不确定如何解决这个问题，无论是通过交换内部元素还是其他方式。

你能帮我解决这个小元素的剩余部分吗？

作为引用，结束位置应该是这样的:

代码很简单(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>标记而不是所有这些脚本。