Javascript图像滑块setInterval（）

Question

我正在制作一个简单的图像滑块，它运行在包含图像的目录中。 图像被称为“img_1”，“img_2”和“img_3”，因此重点是迭代它们。 我没有得到的是如何实现间隔。 我希望图像显示3秒钟，然后更改。 函数“imgSlider”是在体载上。

编辑：我正在寻找简单的解决方案（纯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" /> 

Answer 2

你可以这样做。 初始化计数器，将跟踪当前图像的显示。 现在我们需要的是调用showImage函数，它将显示与计数器当前值对应的图像。

每3秒重复一次。

var count = 0; 
setInterval( function() { 
   showImage(count); 
   count = (count+1)%total_no_of_images
}, 3000)

Answer 3

setInterval接受一个函数，你需要传递一个函数的引用，它将以适当的间隔运行。

此外，请注意，在撰写本文时，接受的答案假定存在无限图像并且具有“无限循环”的间隔样式，如果可能的话应该避免。 在这里，我在第五张图像后停止时钟。

const changeImg = (img, i) => {
   img.setAttribute('src', `img/slider/img_${i}.jpg`);
};

const imgSlider = () => {
    const img = document.createElement('img');
    const targetDiv = document.getElementById('slider');

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

    targetDiv.appendChild(img);

    let i = 0;

    const interval = setInterval(
        () => {
            changeImg(img, i);
            i += 1;
            if (i > 4) {
                clearInterval(interval);
            }
        },
        3000
    );
};