JSFiddle - React, Tailwind, and code Playground

by ScottRippey

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mootools/1.4.5/mootools-core-full-compat-yc.js"></script>
<img data-bind="attr: { src: imageUrl }, event: { load: fadeIn.pass($element) }" />
<img data-bind="image: { 
                    src: imageUrl
                    , fadeIn: true
                    , scaleUpToParent: true 
                }
            " />

JavaScript

window.fadeIn = function(el) {
    el.fade('hide').fade('in');
};


var images = [
    '//placehold.it/160x90'
    ,'//placehold.it/400x300'
    ,'//placehold.it/300x400'
    ,'//lorempixel.com/160/90'
    ,'//lorempixel.com/400/300'
    ,'//lorempixel.com/300/400'
    ], i = 0;

viewModel = {
    imageUrl: ko.observable()
    ,
    next: function() {
        var nextImg = images[i++ % images.length];
        this.imageUrl(nextImg);
    }
};

ko.applyBindings(viewModel);


viewModel.next();
setInterval(function() {
    viewModel.next();
}, 2000);