раз 10 перепроверил , вроде работает
<style>
li{
display: inline-block;
width: 200px;
height: 100px;
background: #000;
margin: 20px;
color: #fff;
-webkit-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
margin-left: 0;
}
ul li:nth-child(odd){
background: red;
}
#naspi{
width: 800px;
overflow: hidden;
height: 100px;
}
ul {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul id="naspi">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div onclick="vlev()">Влево</div>
<br>
<br>
<div id="cifr">0</div>
<script>
var spis = document.getElementById("naspi");
var skoka = spis.getElementsByTagName("li");
var vnut = Number(document.getElementById("cifr").innerHTML);
var vnutnc = document.getElementById("cifr");
function vlev(){
var cifogr = vnutnc.innerHTML;
vnut = vnut + 1;
skoka[cifogr].style.marginLeft = "-225px";
if(vnut >= skoka.length - 2){
console.log(vnut)
vnut = 0;
console.log(vnut)
for(i=0; i<=skoka.length-1; i++){
skoka[i].style.marginLeft = "0";
}
}
vnutnc.innerHTML = vnut;
}
</script>