JSFiddle - React, Tailwind, and code Playground

HTML

<img class='img' src='http://mirlab.org/users/andy.chuang/CHTContest/autoBeat/img/tutorial/sound0.jpg'/>
<button id='btnNext'>next Img</button>
<button id='btnPrev'>prev Img</button>

CSS

.img{
    width:20%;
}

JavaScript

url = 'http://mirlab.org/users/andy.chuang/CHTContest/autoBeat/img/tutorial/sound';
curImg = 0;

$('#btnNext').bind('click',function(){
    $('.img').animate({opacity:0},500,function(){
        $('.img').attr('src',url+curImg+'.jpg');
        $('.img').load(function(){
            $('.img').animate({opacity:1},500);
        });
    });
    curImg += 1;
});

$('#btnPrev').bind('click',function(){
    $('.img').animate({opacity:0},500,function(){
        $('.img').attr('src',url+curImg+'.jpg');
        $('.img').load(function(){
            $('.img').animate({opacity:1},500);
        });
    });
    curImg -= 1;
});