内联块元素的纯javascript水平选框

Question

我正在使用内联块元素制作选取框。 我目前的问题是以有效的方式实现无限滚动。 滚动的结尾如下所示：

起始位置是：

但我需要实现无限效果。我不知道如何通过交换内部元素或其他内容来解决这个问题。

你能帮我解决这个小项目的遗留问题吗？

作为参考，这就是结束位置的样子：

代码很简单（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>标记代替所有此脚本。