JSFiddle - React, Tailwind, and code Playground

by babich_ss

HTML

<img src="images/picture1.jpg" id="mypic" name="mypic" border="0"/>
<input type="button" value="Next picture" onclick="goForward()" />
<input type="button" value="Previous picture" onclick="goReverse()" />

JavaScript

(function(global){
    var images = [
        "images/picture1.jpg",
        "images/picture2.jpg",
        "images/picture3.jpg",
        "images/picture4.jpg",
        "images/picture5.jpg",
    ],
    currentStep = 0,
    image;
    global.goForward = function(){
        currentStep++;
        if(currentStep < images.length){
            image.src = images[currentStep];
        }else{
            currentStep = images.length - 1;
        }
    }
    global.goReverse = function(){
        currentStep--;
        if(currentStep >= 0){
            image.src = images[currentStep];
        }else{
            currentStep = 0;
        }
    }
    if(global.attachEvent){
        global.attachEvent("onload", function(){
            image = document.getElementById("mypic");
        });
    }else{
        global.addEventListener("load", function(){
            image = document.getElementById("mypic");
        });
    }
})(window)