JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://lorempixel.com/100/100/food/1" data-mouseover="http://lorempixel.com/100/100/food/2 http://lorempixel.com/100/100/food/3 http://lorempixel.com/100/100/food/4" />

JavaScript

$(function() {
    $('img').on('mouseover', function() {
        var self = this,
            i = 0,
            images = $(this).data('mouseover').split(/\s+/);
        
        (function nextImage() {
            var next = images[i++ % images.length].split('#');
            $(self).data('timeout', setTimeout(function() {
                self.src = next[0];
                nextImage();
            }, next[1] || 200));
        })();
        
    }).on('mouseout', function() {
        clearTimeout($(this).data('timeout'));
        this.src = $(this).attr('src');
    });
})