效果图：
代码实现：
<style>
* {
margin: 0;
padding: 0;
}
.box {
border: 1px solid #333;
width: 430px;
height: 100px;
padding: 10px 0;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.box ul {
position: absolute;
width: 550px; //（width+margin-right）*5
left: 0;
}
.box li {
list-style: none;
width: 100px;
height: 100px;
float: left;
margin-right: 10px;
background-color: #000;
color: #fff; // 数字颜色
text-align: center;
line-height: 100px;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.btn-bar {
text-align: center;
}
</style>
<body>
<div class="box"> //大盒子
<ul id="list-content" class="clearfix"> //小盒子
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="btn-bar">
<button id="left">向左</button>
<button id="right">向右</button>
</div>
<script>
var oRight =document.getElementById("right");
var oLeft =document.getElementById("left");
var oContent =document.getElementById("list-content");
oContent.innerHTML+=oContent.innerHTML; //无缝滚动需要两组
oContent.style.width =oContent.offsetWidth*2+"px";
var timer=null;
timer=setInterval(function() {
if(oContent.offsetLeft == -oContent.offsetWidth/2) { // 滚动一半需拖回来
oContent.style.left=0;
}else {
oContent.style.left =oContent.offsetLeft-5+"px";
}
},64) // 不需具体，可以根据页面刷新频率调节
</script>
</body>
