CuttingTheAces CuttingTheAces - 4 months ago 13
HTML Question

stopping slideshow and continue after 3 seconds

I made this Slideshow with HTML/CSS/JS and I want to make it so that after I press an arrow key that the autoslide stops, I can just change pics manually and after 3 seconds it goes back into autoslide, but I cant figure out how this works. Any help is appreciated. Many thanks in advance.

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

You need to assign your setInterval reference to a variable, so you can stop that interval using clearInterval(). Now, on every call to slide() that you use as your arrow click handlers, you need to clear the interval at the starting of function and then set it again at the end of the function.

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);
}
Comments