SOURCE

var wrap = document.getElementById("wrap")
var list = document.getElementsByClassName("list")[0]
list.innerHTML += list.innerHTML
var x =2

setInterval(function (){
   goto() 
},1)
function goto(){
    list.style.left = list.offsetLeft - x + 'px'
    if(list.offsetWidth/2 + list.offsetLeft <=0){
        console.log("sdfd")
        list.style.left ="0px"
    }

}

<div id="wrap">
    <div class="list">
        <li></li>
        <li></li>
        <li></li>
    </div>
</div>

#wrap{
    width: 450px;
    height: 150px;
    border: 1px solid #000;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
}
body{
    margin: 0;
    padding: 0;
}
.list{
    width: 900px;
    height: 100%;
    display: flex;
    position: absolute;
}
li:nth-of-type(1){
    background: red;
}
li:nth-of-type(2){
    background: yellow;
}
li:nth-of-type(3){
    background: beige;
}
li:nth-of-type(4){
    background: red;
}
li:nth-of-type(5){
    background: yellow;
}
li:nth-of-type(6){
    background: beige;
}
li{
    width: 150px;
    height: 150px;
    list-style: none;
    
}