Javascript圖像滑塊setInterval（）

我正在製作一個簡單的圖像滑塊，通過包含圖像的目錄運行。這些圖像被稱爲「img_1」，「img_2」和「img_3」，所以重點只是遍歷它們。我沒有得到的是如何實現一個區間。我想讓圖像顯示3秒鐘，然後更改。「imgSlider」功能在身體負荷上。Javascript圖像滑塊setInterval（）

編輯：我正在尋找簡單的解決方案（純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); 
    } 
}

來源

2016-12-27 saltcracker

你需要做的很簡單，你必須改變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" />

來源

2016-12-27 21:57:59

看起來不錯，但不幸的是我不知道如何在ajax中編碼。它可能適用於這項任務，但我不想懶惰，因爲我目前正在學習JavaScript。 1+雖然，也許你可以寫在純JavaScript的？ – saltcracker

@saltcracker哈哈......現在，你需要手動完成它，因爲要知道圖像是否存在，你需要AJAX或服務器端調用。 –

@saltcracker你可以使用jQuery嗎？我可以幫你編寫AJAX。 –

你可以這樣來做。初始化一個計數器，該計數器將保持顯示當前圖像的軌跡。現在我們需要調用showImage函數來顯示與計數器當前值對應的圖像。

每3秒重複一次。

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

來源

2016-12-27 22:00:50

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

來源

2016-12-27 22:09:40

哈哈！ ES6的功能:)他提到他正在試圖學習JS。此符號可能會使他感到困惑：P –

感謝您的貢獻。它看起來有點高級，但我不知道我目前在初學者級別學習JavaScript。我會看看它，也許我會最終從中學到一些東西。 :) – saltcracker

https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&code= 您可以使用它來傳輸到正常的JS –

Javascript圖像滑塊setInterval（）

回答

相關問題