SOURCE

var scroll = document.getElementById('box-scroll');
var items  = scroll.getElementsByTagName('li');
var len    = items.length;
var width  = items[0].offsetWidth;
scroll.style.width = width*len + 'px';
lunbo() 
function lunbo() {
  var box = document.getElementById('box')
  var left = width;
  
	box.scrollLeft = left;
	// box.scrollLeft += 2;
  // if(box.scrollLeft % width < 1) {
  //   box.appendChild(scroll.getElementsByTagName('li')[0]);
  //   box.scrollLeft = 0;
  // }
  
  var timer = setInterval(lunbo, 2000);
  box.onmouseover = function() {
     clearInterval(timer);
  };
  box.onmouseout = function() {
     timer = setInterval(lunbo, 2000);
  };
}

<div id="box">
  <ul id="box-scroll">  
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
  </ul>
</div>

#box {
  overflow-y: hidden;
  width: 400px;
  height: 200px;
}
ul {
  padding: 0;
  margin: 0;
  height: 200px;
  line-height: 200px;
}
li {
  float: left;
  padding: 0;
  margin: 0;
  width: 400px;
  height: 100%;
  list-style: none;
}
a {
  display: block;
  height: 100%;
  color: #000;
  text-decoration: none;
  background-color: red;
  font-size: 36px;
  text-align: center;
  box-shadow: inset 2px 2px green, inset 2px -2px green, inset -2px 2px green, inset -2px -2px green;
}
.ani {
  animation: move 1s;
}
@-webkit-keyframes move {
  form {
    transform: translateX(0)
  }
  to {
    transform: translateX(0)
  }
}