JSFiddle - React, Tailwind, and code Playground

by zhukovroman

HTML

<div id="cont"></div>

JavaScript

$(document).ready(function() {

    var img = new Image();
    img.src = 'http://www.google.ru/images/srpr/logo3w.png';
    
    var probeimage = $('<img src="' + img.src + '" />');

    img.onload = function() {
        
        var imagewidth = this.width;

        /* imgcount - amount of images we need to rotate. */
        /* instead of (+2) we could use (+1 + (screen.width % imagewidth)), but that's too complex */
        /* so, one will be hiding in the left side, another would cover the empty space in the right */
        var imgcount = ((screen.width - (screen.width % imagewidth)) / imagewidth) + 2;
        var contwidth = imgcount * imagewidth;

        /* since #cont is absolutely positioned, the #contrap's height would be 0. Let's set the height */
        $('#contwrap').css({
            'height': this.height
        });
        $('#cont').css({
            'width': contwidth
        });

        $('#cont').append(probeimage); /* -1 because we have probeimage */
        for (i = 0; i < imgcount - 1; i++) {
            $('#cont').append($('<img src="' + img.src+ '" />'));
        }

        function eternalmotion() {
            $('#cont IMG').first().animate({
                marginLeft: -imagewidth
            }, 100000, 'linear', function() {
                $('#cont IMG:first').css({
                    'marginLeft': '0'
                }).appendTo('#cont');
                eternalmotion();
            });
        }

        eternalmotion();
    }; //probeimage.load   

});