Diashow anhalten und nach 3 Sekunden fortfahren

Question

Ich habe diese Diashow mit HTML/CSS/JS gemacht und möchte es so machen, dass ich nach dem Drücken einer Pfeiltaste den Autoslide anhalten kann geht zurück in autoslide, aber ich kann nicht herausfinden, wie das funktioniert. Jede Hilfe wird geschätzt. Vielen Dank im Voraus.

JS:

var imagecount = 1; 
var total = 6; 
var uniqueRandoms = []; 

function makeUniqueRandom() { 
    if (!uniqueRandoms.length) { 
    for (var i = imagecount; i <= total; i++) { 
     uniqueRandoms.push(i); 
    } 
    } 
    var index = Math.floor(Math.random() * uniqueRandoms.length); 
    var val = uniqueRandoms[index]; 

    uniqueRandoms.splice(index, 1); 

    return val; 
} 

function slide(x) { 
    var Image = document.getElementById('img'); 
    imagecount = imagecount + x; 
    if (imagecount > total) { 
    imagecount = 1; 
    } 
    if (imagecount < 1) { 
    imagecount = total; 
    } 
    Image.src = "images/img" + imagecount + ".jpg"; 
    ChangeText(imagecount); 
} 



window.setInterval(function slideA(x) { 
    var Image = document.getElementById('img'); 
    imagescount = makeUniqueRandom(); 
    console.log(imagescount); 
    Image.src = "images/img" + imagescount + ".jpg"; 
    ChangeText(imagescount); 
}, 3000); 


function ChangeText(imgNum) { 
    var allImagesAndText = { 
    1: "Seltene römische Goldmünze", 
    2: "Römische Funde", 
    3: "Römische Wandmalerei", 
    4: "Tutanchamun", 
    5: "Cheops Pyramide", 
    6: "Ägyptische Malerei" 
    }; 
    document.getElementById("text1").innerHTML = allImagesAndText[imgNum]; 
} 

CSS:

#container { 
    height: 450px; 
    width: 650px; 
    margin: 20px auto; 
    position: relative; 
    z-index: 1; 
    border: 10px solid #000; 
    border-radius: 10px; 
} 
#img { 
    height: 450px; 
    width: 650px; 
} 
#left_holder { 
    height: 450px; 
    width: 100px; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
} 
#right_holder { 
    height: 450px; 
    width: 100px; 
    position: absolute; 
    right: 0px; 
    top: 0px; 
} 
.left { 
    height: 50px; 
    width: 50px; 
    position: absolute; 
    top: 40%; 
    left: 0px; 
} 
.right { 
    height: 50px; 
    width: 50px; 
    position: absolute; 
    top: 40%; 
    right: 0px; 
} 
#text1 { 
    position: absolute; 
    color: #fff; 
    font-size: 32px; 
    background-color: #000; 
    opacity: 0.5; 
    left: 37%; 
    z-index: 2; 
} 

HTML:

<div id="container"> 
    <div id="text1">Text</div> 
    <img src="images/img1.jpg" id="img" /> 
    <div id="left_holder"> 
    <img onClick="slide(-1)" class="left" src="images/arrow_left.png" /> 
    </div> 
    <div id="right_holder"> 
    <img onClick="slide(1)" class="right" src="images/arrow_right.png" /> 
    </div> 
</div> 

Answer 1

Sie benötigen setInterval Verweis auf eine Variable zuweisen, so dass Sie dieses Intervall clearInterval() mit stoppen . Nun müssen Sie bei jedem Aufruf an slide(), den Sie als Pfeil-Klick-Handler verwenden, das Intervall beim Start der Funktion löschen und dann am Ende der Funktion erneut einstellen.

function slide(x) { 
    clearInterval(sliderInterval); 
    var Image = document.getElementById('img'); 
    imagecount = imagecount + x; 
    if (imagecount > total) { 
    imagecount = 1; 
    } 
    if (imagecount < 1) { 
    imagecount = total; 
    } 
    Image.src = "images/img" + imagecount + ".jpg"; 
    ChangeText(imagecount); 

    sliderInterval = window.setInterval(slideA, 3000); 
} 



sliderInterval = window.setInterval(slideA, 3000); 

function slideA() { 
    var Image = document.getElementById('img'); 
    imagescount = makeUniqueRandom(); 
    console.log(imagescount); 
    Image.src = "images/img" + imagescount + ".jpg"; 
    ChangeText(imagescount); 
} 

Answer 2

Assign setInterval einer Variablen:

var silderTimerID = window.setInterval(function slideA(x) { 
var Image = document.getElementById('img'); 
imagescount = makeUniqueRandom(); 
console.log(imagescount); 
Image.src = "images/img" + imagescount + ".jpg"; 
ChangeText(imagescount); 
}, 3000); 

und dann keypress Ereignishandler hinzu:

window.addEventListener("keypress", function(e){ 
console.log(e); 
// write your key condition code 
clearInterval(silderTimerID) 

});

Verwenden Sie clearInterval(), um die Timer-Wiederholung zu löschen.

bitte Demo sehen:

https://jsfiddle.net/sxzety3e/1/