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代码，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

纯JS版

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

每3秒重复一次。

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

Answer 3

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

此外，请注意，在撰写本文时，接受的答案假设有无限的图像，并且有一个＆＃34;无限循环＆＃34;间隔的风格，如果可能的话应该避免。在这里，我在第五张图像之后停止时钟。

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

Javascript图像滑块setInterval（）

3 个答案: