JSFiddle - React, Tailwind, and code Playground

by cambraca

HTML

<ul id="logos"></ul>

CSS

ul#logos {
margin: 30px;
}
ul#logos li {
float: left;
width: 70px;
height: 70px;
display: block;
}
ul#logos li img {
width: 50px;
position: absolute;
}

JavaScript

var logos = ['http://www.htmlcinco.com/wp-content/uploads/2011/01/HTML5_Logo_256.png',
             'http://blog.arpitnext.com/wp-content/uploads/2011/03/new-chromium-logo.png',
             'http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png',
             'http://www.software-p2p.com/wp-content/uploads/2010/10/spotify-logo.png',
             'http://www.blingcheese.com/myspace-icon.png',
             'http://233grados.lainformacion.com/.a/6a00e552985c0d88330153932da68f970b-800wi'];

var logos_preload = [];
var visible_logos = 4;
var current_index = -1;
var current_logo = visible_logos % logos.length;
var logo_fade_time = 2000;
var logo_interval = 4000;

shuffle = function(o) { //v1.0
    for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

function init() {
    shuffle(logos);

    for (var i = 0; i < logos.length; i++)
    logos_preload[i] = new Image(logos[i]);

    var ul = $('#logos');
    for (var i = 0; i < visible_logos; i++) {
        li = $('<li />');
        li.append($('<img />', {
            'src': logos[i]
        }));
        li.append($('<img />').css('display', 'none'));
        ul.append(li);
    }

    setInterval(changeLogo, logo_interval);
}

function changeLogo() {
    current_logo = (current_logo + 1) % logos.length;
    current_index = (current_index + 1) % visible_logos;

    var imgs = $('#logos li').eq(current_index).find('img');
    var next = imgs.eq(0).is(':visible') ? 1 : 0;

    imgs.eq(next).attr('src', logos[current_logo]).fadeIn(logo_fade_time);
    imgs.eq(next ? 0 : 1).fadeOut(logo_fade_time);
}

$(function() {
    init();
});