JSFiddle - React, Tailwind, and code Playground

by MasterAlex

HTML

<div class="text">
    <div class="text-block"><img src="http://malsup.github.com/images/beach1.jpg" alt="" /></div>
    <div class="text-block"><img src="http://malsup.github.com/images/beach2.jpg" alt="" /></div>
    <div class="text-block"><img src="http://malsup.github.com/images/beach3.jpg" alt="" /></div>
</div>

CSS

.text-block {
    position: absolute;
    display: none;    
}

JavaScript

// Пример для вопроса http://hashcode.ru/questions/395005/

$(document).ready(function() {
    $('.text .text-block').eq(0).addClass('active').fadeIn(1000);

    setInterval('blockAnimate();', 5000);
});


function blockAnimate() {
    var length = $('.text .text-block').length - 1;
    $('.text .text-block').each(function(index) {
        if($(this).hasClass('active') && index != length) {
            $(this).removeClass('active').fadeOut(1000).next('.text-block').addClass('active').fadeIn(1000);
            return false;
        } else if (index == length) {
            $(this).removeClass('active').fadeOut(1000);
            $('.text .text-block').eq(0).addClass('active').fadeIn(1000);
            return false;
        }
    });
};