CODEWITHSUNDEEP
javascripthtmlcssslideshow
CuttingTheAces
CuttingTheAces

Reputation: 51

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>

Upvotes: 1

Views: 106

Answers (2)

Joey Etamity
Joey Etamity

Reputation: 866

Assign setInterval to a variable:

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

and then add keypress event handler:

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

});

Use clearInterval() to clear timer repeat.

please see demo:

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

Upvotes: 1

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10093

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

Upvotes: 1

Related Questions