JSFiddle - React, Tailwind, and code Playground

by Academia

HTML

<input type="button"value="Toggle" id="start"></input>
<br>
<img alt="" src="http://findicons.com/icon/download/39145/happy/128/png?id=358463" data-gallery='["http://findicons.com/icon/download/39145/happy/128/png?id=358463","http://findicons.com/icon/download/425461/really_angry/128/png?id=425472"]'></img>

JavaScript

var gallery = JSON.parse($("img").attr("data-gallery"));
var npic = gallery.length;
var current = 0;

$("input").click(function(){
    $("img").fadeOut(3000, function() {
        current = (current + 1) % npic;
        $("img").attr("src",gallery[current]);
        $("img").fadeIn(3000);
  });
});