Question

我使用HTML / CSS / JS制作了这个幻灯片，我希望这样做，以便在我按下箭头键后自动滑动停止后，我可以手动更改图片，3秒后它会重新进入自动滑动，但是我无法弄清楚这是如何工作的。任何帮助表示赞赏。非常感谢提前。

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

您需要将setInterval引用分配给变量，以便可以使用clearInterval()停止该间隔。现在，在您用作箭头单击处理程序的每个slide()调用时，您需要清除函数启动时的间隔，然后在函数结束时再次设置它。

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

将setInterval分配给变量：

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

然后添加keypress事件处理程序：

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

}）;

使用clearInterval()清除计时器重复。

请参阅演示：

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

停止幻灯片放映并在3秒后继续

2 个答案: