JSFiddle - React, Tailwind, and code Playground

by Cwalkdawg

HTML

<div id='image_box'></div>

CSS

#image_box {
    margin-left:20px;
    width:533px;
    height:800px;
    background-image:url('http://www.studioprivate.co.uk/droguslong.jpg');
    background-repeat:no-repeat;
    background-position:0px;
}

JavaScript

var timer_id = 0;

$(function() {
    $("#image_box").hover(function() {
        timer_id = setInterval(rotate_img, 200);
    }, function() {
        clearInterval(timer_id);
    }).click(function() {
        $(this).css(/*change background stuff*/);  
    });
})();

function rotate_img() {
    var curr_pos = parseInt($("#image_box").css("background-position").slice(0,-2), 10);   
    if (curr_pos <= (-13858+533)) {
        curr_pos = 0+"px";
    } else {
        curr_pos = curr_pos - 533 + "px";
    }
    
    $("#image_box").css("background-position", curr_pos); //move bacground to the left by 160px
    if (curr_pos == -13580) {
        curr_pos = 0;
    }
}