JSFiddle - React, Tailwind, and code Playground

HTML

<div id="frame-container">
    <img class="frame" src="http://www.clipartkid.com/images/288/snowman-melting-sequence-clipart-snowman-sequence-cards-niaFak-clipart.gif" />
    <img class="frame" src="http://images.twinkl.co.uk/image/upload/t_630,f_auto/image/db/00/T-S-1538-6-Step-Sequencing-Cards-Getting-Up_ver_1.jpg" />
    <img class="frame" src="http://www.clipartkid.com/images/288/snowman-melting-sequence-clipart-snowman-sequence-cards-niaFak-clipart.gif" />
    <img class="frame" src="http://images.twinkl.co.uk/image/upload/t_630,f_auto/image/db/00/T-S-1538-6-Step-Sequencing-Cards-Getting-Up_ver_1.jpg" />
    <img class="frame" src="http://www.clipartkid.com/images/288/snowman-melting-sequence-clipart-snowman-sequence-cards-niaFak-clipart.gif" />
    <img class="frame" src="http://images.twinkl.co.uk/image/upload/t_630,f_auto/image/db/00/T-S-1538-6-Step-Sequencing-Cards-Getting-Up_ver_1.jpg" />
    <img class="frame" src="http://www.clipartkid.com/images/288/snowman-melting-sequence-clipart-snowman-sequence-cards-niaFak-clipart.gif" />
    <img class="frame" src="http://images.twinkl.co.uk/image/upload/t_630,f_auto/image/db/00/T-S-1538-6-Step-Sequencing-Cards-Getting-Up_ver_1.jpg" />
    <img class="frame" src="http://www.clipartkid.com/images/288/snowman-melting-sequence-clipart-snowman-sequence-cards-niaFak-clipart.gif" />
    <img class="frame" src="http://images.twinkl.co.uk/image/upload/t_630,f_auto/image/db/00/T-S-1538-6-Step-Sequencing-Cards-Getting-Up_ver_1.jpg" />
    <img class="frame" src="http://www.clipartkid.com/images/288/snowman-melting-sequence-clipart-snowman-sequence-cards-niaFak-clipart.gif" />
    <img class="frame" src="http://images.twinkl.co.uk/image/upload/t_630,f_auto/image/db/00/T-S-1538-6-Step-Sequencing-Cards-Getting-Up_ver_1.jpg" />
</div>

JavaScript

$(window).load(function(){   
    var frameSpeed = 50,
        frameContainer = $('#frame-container'),
        frames = $('.frame',frameContainer ),
        frameCount = frames.length,
        t = null,
        frameIndex = 0,
        showFrame = function (n){
            return frames.hide().eq(n).show();
        },
        nextFrame = function(){
            showFrame(++index);
            t = setTimeout(nextFrame,frameSpeed);
        },
        stopFrames = function(){
            clearInterval(t);
            showFrame(0);
            index = 0;
        };
    frameContainer
        .on('mouseenter',nextFrame)
        .on('mouseleave',stopFrames);
    stopFrames();
});