JSFiddle - React, Tailwind, and code Playground

HTML

<div class="productanimate">
    <img src=http://jsgears.com/_icons/11.png>
    <img src=http://jsgears.com/_icons/12.png>
    <img src=http://jsgears.com/_icons/14.png>
    <img src=http://jsgears.com/_icons/15.png>
</div>

CSS

.productanimate {
    position: relative;
    width : 150px;
    height: 60px;
    border:1px solid black;
    overflow: hidden;
}

JavaScript

// x 為圖片寬度(包括 padding, border, margin)
var x = $('.productanimate img').first().outerWidth(true), 
    distance = x/2;

(function func() {

    $('.productanimate img').each(function(i){
        $(this).css({
            position: 'absolute',
            // 每張圖片間格為圖片寬度的一半
            left: i*distance ,
            opacity : 0.2
        })
    });

    
    $('.productanimate img').first()
        .animate({opacity : 1}, 500)
        .delay(1000)
        .animate( { left: '-' + x + 'px'}, 1200 , 
           function(){
              x += distance;
              $(this).next()
                 .animate({opacity : 1}, 500)
                 .animate({ left: '-' + x + 'px' }, 1200, arguments.callee);
        });
    setTimeout(func, 8000);
})();