纯javascript中的自动幻灯片放映问题

我试图通过纯javascript构建一个自动幻灯片来显示4张图片。 setInterval（）和setTimeout（）函数真让我困惑

代码显示第一张图片，然后等待3秒，显示最后一张图片，然后结束…不知道为什么

var divImages = document.getElementById("images");
var img1 = document.getElementById("img1"); //display:none using CSS
var img2 = document.getElementById("img2"); //display:none using CSS
var img3 = document.getElementById("img3"); //display:none using CSS
var img4 = document.getElementById("img4"); //display:none using CSS

window.addEventListener("load", getFirstImage);


function getFirstImage(){
  img1.style.display = "block";
}

function getSecondImage(){
  img2.style.display = "block";
  img1.style.display = "none";
}
setTimeout(getSecondImage,3000);

function getThirdImage(){
  img3.style.display = "block";
  img2.style.display = "none";
}
setTimeout(getThirdImage,3000);

function getFourthImage(){
  img4.style.display = "block";
  img3.style.display = "none";
}
setTimeout(getFourthImage,3000);

$（“#幻灯片>div:gt（0）”）.hide（）；
setInterval（函数（）{
$（“#幻灯片>分区：第一个”）
.衰减（1000）
.next（）
法丹先生（1000）
(完)
.appendTo（“#幻灯片”）；
}, 1200);

我看到您有getElementById，所以我假设您有一些HTML？ 这是一个jquery脚本，假设您有一个div和一个名为slideshow的类 您在该div中嵌套的任何div都将出现在幻灯片中！希望这有帮助

$（“#幻灯片>div:gt（0）”）.hide（）；
setInterval（函数（）{
$（“#幻灯片>分区：第一个”）
.衰减（1000）
.next（）
法丹先生（1000）
(完)
.appendTo（“#幻灯片”）；
}, 1200);

我看到您有getElementById，所以我假设您有一些HTML？ 这是一个jquery脚本，假设您有一个div和一个名为slideshow的类

---

您在该div中嵌套的任何div都将出现在幻灯片中！希望这有帮助，这里有一个有效的解决方案。希望有帮助

setInterval（米芬森，2500）；
var计数器=1；
函数mifancion（）
{
var elemento=document.getElementById（“foto”）；
如果（计数器==0）{
elemento.src=”http://i2.cdn.cnn.com/cnnnext/dam/assets/141027105451-pkg-petroff-ferrari-sergio-elite-car-00014417-story-top.jpg";
}
否则如果（计数器===1）{
elemento.src=”http://www.fashiontrends.pk/wp-content/uploads/2012/02/Porsche-Sports-Car.jpg";
}
否则如果（计数器===2）{
elemento.src=”http://bestcarlive.com/wp-content/uploads/bmw-sports-car-wallpapers-20140720034912-53cb3c380a9cf.jpg";
}
否则如果（计数器===3）{
elemento.src=”http://media.caranddriver.com/images/17q1/674191/2018-kia-stinger-sports-sedan-photos-and-info-news-car-and-driver-photo-674389-s-450x274.jpg";
计数器=-1；
}
++计数器；
}

---

这里有一个可行的解决方案。希望有帮助

setInterval（米芬森，2500）；
var计数器=1；
函数mifancion（）
{
var elemento=document.getElementById（“foto”）；
如果（计数器==0）{
elemento.src=”http://i2.cdn.cnn.com/cnnnext/dam/assets/141027105451-pkg-petroff-ferrari-sergio-elite-car-00014417-story-top.jpg";
}
否则如果（计数器===1）{
elemento.src=”http://www.fashiontrends.pk/wp-content/uploads/2012/02/Porsche-Sports-Car.jpg";
}
否则如果（计数器===2）{
elemento.src=”http://bestcarlive.com/wp-content/uploads/bmw-sports-car-wallpapers-20140720034912-53cb3c380a9cf.jpg";
}
否则如果（计数器===3）{
elemento.src=”http://media.caranddriver.com/images/17q1/674191/2018-kia-stinger-sports-sedan-photos-and-info-news-car-and-driver-photo-674389-s-450x274.jpg";
计数器=-1；
}
++计数器；
}

---

这很简单，但在我解释之前，请尝试一下

setTimeout("alert('a')",3000)
setTimeout("alert('b')",3000)

看到了吗？两个都在3秒后运行为什么？你问是因为

设置超时是异步的

当javascript解释器看到第一个setTimeout时，它会记录下“3秒后要做的事情”现在在记录之后，它读取了第二个setTimeout，这也被记录在同一个列表中，但真正需要注意的是，由于js引擎难以置信的速度，即使你输入了大量代码（甚至k行代码），最后两个事件之间的时间间隔几乎为零在两次设置超时之间，它们仍然会按照外观的顺序在3秒后运行。这就是为什么所有4个幻灯片函数都会按照设置超时的顺序在3秒后运行，因为

getFourthImage（）

是最后一次运行，只保留了它的效果

那么，如何将它们级联？只需将幻灯片的settimeout放在它前面的幻灯片功能中，有点像警报或接力赛

window.addEventListener("load", getFirstImage);


function getFirstImage(){
  img1.style.display = "block";
  setTimeout(getSecondImage,3000);
}

function getSecondImage(){
  img2.style.display = "block";
  img1.style.display = "none";
  setTimeout(getThirdImage,3000);
}


function getThirdImage(){
  img3.style.display = "block";
  img2.style.display = "none";
  setTimeout(getFourthImage,3000);
}

function getFourthImage(){
  img4.style.display = "block";
  img3.style.display = "none";   // last one no need to put anything but you can if you wish
}

---

这很容易，但在我解释之前，请尝试一下

setTimeout("alert('a')",3000)
setTimeout("alert('b')",3000)

看到了吗？两个都在3秒后运行为什么？你问是因为

设置超时是异步的

当javascript解释器看到第一个setTimeout时，它会记录下“3秒后要做的事情”现在在记录之后，它读取了第二个setTimeout，这也被记录在同一个列表中，但真正需要注意的是，由于js引擎难以置信的速度，即使你输入了大量代码（甚至k行代码），最后两个事件之间的时间间隔几乎为零在两次设置超时之间，它们仍然会按照外观的顺序在3秒后运行。这就是为什么所有4个幻灯片函数都会按照设置超时的顺序在3秒后运行，因为

getFourthImage（）

是最后一次运行，只保留了它的效果

那么，如何将它们级联？只需将幻灯片的settimeout放在它前面的幻灯片功能中，有点像警报或接力赛

window.addEventListener("load", getFirstImage);


function getFirstImage(){
  img1.style.display = "block";
  setTimeout(getSecondImage,3000);
}

function getSecondImage(){
  img2.style.display = "block";
  img1.style.display = "none";
  setTimeout(getThirdImage,3000);
}


function getThirdImage(){
  img3.style.display = "block";
  img2.style.display = "none";
  setTimeout(getFourthImage,3000);
}

function getFourthImage(){
  img4.style.display = "block";
  img3.style.display = "none";   // last one no need to put anything but you can if you wish
}

---

嗨，谢谢你的帮助。不幸的是，我还没有学习jquery。我强迫自己只使用javascript。如果您能提供纯javascript的解决方案，我将不胜感激。您好，谢谢您的帮助。不幸的是，我还没有学习jquery。我强迫自己只使用javascript。如果您能提供纯javascript的解决方案，我将不胜感激。非常感谢！这太棒了！我喜欢！还想问一下-我正在通过一个停止按钮设置clearInterval（）。但它只在整个功能或整个4张幻灯片完成运行后运行。如果我想让幻灯片在我点击按钮时立即结束，那也很简单。制作一个全局变量，比如说

latestId

，并让它保存最新计时器的id（setTimeout的返回值）（因为就像取消的支票一样，在setTimeout安排的函数运行后，id就没有用处了）。只需替换

setTimeout即可（getThirdImage，3