JSFiddle - React, Tailwind, and code Playground

HTML

<div class="con_roa">
    <div class="roa">
        <div class="roa__img"><img src="http://img.zcool.cn/community/05e5e1554af04100000115a8236351.jpg"></div>
        <div class="roa__img"><img src="http://imgsrc.baidu.com/image/c0%3Dshijue1%2C0%2C0%2C294%2C40/sign=e05fa110566034a83defb0c2a37a2321/5fdf8db1cb1349547059c0755c4e9258d1094a5f.jpg"></div>
        <div class="roa__img"><img src="http://img10.3lian.com/sc6/show/s11/19/20110711104956189.jpg"></div>
        <div class="roa__img"><img src="http://imgsrc.baidu.com/image/c0%3Dshijue1%2C0%2C0%2C294%2C40/sign=cd79b8cf7c094b36cf9f13aecba516ac/adaf2edda3cc7cd971c472c93301213fb80e9131.jpg"></div>
    </div>
</div>

CSS

.con_roa {
            border: 1px solid;
            height: 300px;
            overflow: hidden;
            position: relative;
            width: 500px;
        }

        .roa {
            font-size: 0;
            position: absolute;
            transition: left 0.5s;
            width: 5000px;
        }

        .roa__img {
            display: inline-block;
        }

        .roa__img img {
            height: 300px;
            width: 500px;
            vertical-align: middle;
        }

JavaScript

var current = 0;
    var roa = document.querySelector('.roa');
    roa.appendChild(roa.firstElementChild.cloneNode(true));
    var len = roa.childElementCount;

    function play() {
        if (current === len) {
            current = 2;
            roa.style.transition = 'hello';
            roa.style.left = 0 + 'px';

            setTimeout(function () {
                roa.style.transition = 'left 0.5s';
                roa.style.left = '-500px';
            });
        } else {
            roa.style.transition = 'left 0.5s';
            roa.style.left = -500 * current + 'px';
            current++
        }
    }
    play();
    var timer = setInterval(play, 1500);