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