JSFiddle - React, Tailwind, and code Playground

by TheJoeFletch

HTML

<div  class="image-holder" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834"  />


</div>
<div  class="image-holder" >
<img src="http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png"  />
</div>

CSS

.image-holder img{ opacity: 0;}
.image-holder
{
    position: absolute;
}

JavaScript

var img = $(".image-holder img")
var i = 0;
var count = img.length - 1;

setInterval(function() {
    showImage(i);
    i++;
    if (i > count) i = 0;
}, 2000);

function showImage(i) {
    img.eq(i - 1).animate({
        "opacity": "0"
    }, 1000);
    img.eq(i).animate({
        "opacity": "1"
    }, 1000);
}