JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<link rel="stylesheet" href="http://stayfowas.bplaced.net/format.css">
<form>
  <input type="checkbox" name="checkbox_auto" value="1" id="checkbox_auto">
  <input type="text" value="">
  <br>
  <input type="button" name="zurueck"  value="zurueck" onClick="gallery('zur')">
  <input type="button" name="weiter"  value="weiter"   onClick="gallery('vor')">
</form>
<div>
    <a href="fuehling01.jpg"><img src="fuehling01.jpg" id="bildHintenLinks"  width="338" height="273"  name="slide1"></a>
    <a href="fuehling02.jpg"><img src="fuehling02.jpg" id="bildMitteHinten"  width="364" height="273"  name="slide2"></a>
    <a href="fuehling03.jpg"><img src="fuehling03.jpg" id="bildHintenRechts" width="338" height="273"  name="slide3"></a>
    <a href="fuehling04.jpg"><img src="fuehling04.jpg" id="bildrechts" width="338" height="273"  name="slide4"></a>
	<a href="fuehling06.jpg"><img src="fuehling06.jpg" id="bildlinks" width="338" height="273"  name="slide6"></a>
	<a href="fuehling05.jpg"><img src="fuehling05.jpg" id="bildMitteVorne" width="364" height="273"  name="slide5"></a>
</div>

JavaScript

// this gets an array of images
var images = Array.prototype.slice.call(document.getElementsByTagName("img"), 0);

// this is just for the fiddle
images.forEach(function(img){
    var src = "http://stayfowas.bplaced.net/" + img.getAttribute("src");
    img.setAttribute("src", src);
});

// the actual code
var srcs = images.map(function(img){ return img.src; });
var current = 0;
gallery = function(which){
    if (which === "vor") {
        which = current + 1;
    }
    if (which === "zur") {
        which = current - 1;
    }
    
    if (which >= images.length) {
        which -= images.length;
    }       

    images.forEach(function(img, index){
        img.src = srcs[(index + which) % srcs.length];                
    });
    
    current = which;
}

var timer;
document.getElementById("checkbox_auto").addEventListener("change", function() {
    if (timer != null) {
        clearInterval(timer);
    }        
    
    if (this.checked) {
        timer = setInterval(function(){
            gallery("vor");
        }, 500);    
    }
});