JSFiddle - React, Tailwind, and code Playground

by Phil Everton

HTML

<div id="show">
    <img src="http://lorempixel.com/200/100/nightlife/placeholder" />
</div>
<input type="button" id="start" value="start" />
<input type="button" id="pause" value="pause" />
<input type="button" id="reset" value="reset" />

CSS

html, body { margin:0; padding:0; }
img { width:100%; height:auto; }

JavaScript

var slides = 25, //number of slides
    i = 1, //first slide
    delay = 2000, //set delay
    timer;

function pngani() {
    if (i <= slides) {
        //$('#show img').attr('src', 'pathtofile/' + i + '.png');//to add extension
        $('#show img').attr('src', 'http://lorempixel.com/200/100/nightlife/frame-'+i);//test
    }
    i++;
}
function pause() {//run this to stop the sequence
    clearInterval(timer);
    timer = null;   
}
$('#start').on('click', function () {
    timer = setInterval(pngani, delay);
    pngani();
});

$('#pause').on('click', function () { pause(); });

$('#reset').on('click', function () {
    i = 1;
    //$('#show img').attr('src', 'pathtofile/' + i + '.png');//to add extension
    $('#show img').attr('src', 'http://lorempixel.com/200/100/nightlife/frame-'+i);//test;
});