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

我正在使用内嵌块元素制作一个选框。 目前，我的问题是以一种有效的方式实现无限滚动。 卷轴的末端如下所示：

起始位置为：

但我需要达到无限的效果。我不知道该怎么做，要么交换里面的元素，要么做别的什么

你能帮我解决这个小项目剩下的问题吗

作为参考，末端位置应该是这样的：

代码很简单（）：

HTML

JS

var scroller=document.getElementById（'wrapper'）；
函数start（）{
对于（var i=0；
i

我假设您想知道如何保持函数运行，而不是如何使其恢复动画。调用函数

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

var scroller=document.getElementById（'wrapper'）；
函数start（）{
对于（var i=0；
i

或者，您可以使用
标记来代替所有脚本。
这不是我真正想要的。请参阅jQueryRight的示例，这就是想法。我正在寻找一个好的和有效的方法来做这件事。我也在摆弄一种我将作为答案发布的方式，但我希望看到其他人对如何解决这个问题的看法
.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;
}

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

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