Javascript 图像 slider setInterval()

Question

我正在制作一个简单的图像 slider ，它在包含图像的目录中运行。这些图像称为“img_1”、“img_2”和“img_3”，因此重点是遍历它们。我不明白的是如何实现一个间隔。我希望图像显示 3 秒，然后更改。函数“imgSlider”在 body 负载上。

编辑:我正在寻找简单的解决方案(纯 JS)，因为我目前正在学习 JS。很抱歉没有在问题中澄清它。不过这里有很多好的答案!

function changeImg(img, i){
 img.setAttribute("src", "img/slider/img_" + i + ".jpg");
}

function imgSlider(){
 var img = document.createElement("img");
 var targetDiv = document.getElementById("slider");

 img.setAttribute("width", "100%");
 img.setAttribute("height", "70%");

 targetDiv.appendChild(img);

 for(i=1; i<4; i++){
     setInterval(changeImg(img, i), 3000);
  }
}

Answer 1

您需要做的很简单，您必须像这样更改 setInterval 代码:

$(function () {
  var curImg = 1;
  setInterval(function () {
    $("img").attr("src", "//placehold.it/100?text=" + ++curImg);
  }, 2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="//placehold.it/100?text=1" />

在这里，我给出了2秒的检查间隔。我只使用 jQuery 来更新图像。如果您想要在纯 JavaScript 中使用它，则可以通过您的代码实现。

纯JS版

var curImg = 1;
setInterval(function () {
  document.getElementsByTagName("img")[0].src = "//placehold.it/100?text=" + ++curImg;
}, 2000);

<img src="//placehold.it/100?text=1" />