設置間隔爲JQuery的

Question

圖片我有這樣的代碼：

<script type="text/javascript"> 
    images = new Array; 
    images[0] = "http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/Candle01.gif"; 
    images[1] = "http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/Candle02.gif"; 
    images[2] = "http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/Candle03.gif"; 
    images[3] = "http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/Candle04.gif"; 
    images[4] = "http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/Candle05.gif"; 
    images[5] = "http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/candle_end.gif"; 
    setInterval(function() { changeImage() }, 14400000); 
    x = 0; 
    function changeImage() { 
     document.getElementById('candle').src = images[x]; 
     if (x < 5) { 
      x += 1; 
     } 
     else if (x = 6) { 
      x = 5; 
     } 

    } 
</script> 

而且我想改變的時候，他們看到的，使得最後只能以每小時最多再設置其他的第一GIF一致的間隔。

但是我沒有看到在單個數組內可以完成的地方。我可以爲每個圖像有不同的時間嗎？

Answer 1

您可以存儲時間與您的圖像，然後使用setTimeout。

像這樣：https://jsfiddle.net/836xj0ry/

var images = []; 
images[0] = {src: "http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/Candle01.gif", time: 100}; 
images[1] = {src: "http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/Candle02.gif", time: 200}; 
images[2] = {src: "http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/Candle03.gif", time: 50}; 
images[3] = {src: "http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/Candle04.gif", time: 70}; 
images[4] = {src: "http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/Candle05.gif", time: 25}; 
images[5] = {src: "http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/candle_end.gif", time: 200}; 

function changeImage(i) { 
    if(i > 5) { 
     i = 0; 
    } 
    document.getElementById('candle').src = images[i].src; 
    window.setTimeout(function() { 
     changeImage(++i); 
    }, images[i].time); 
} 

changeImage(0); 

Answer 2

你可以超時屬性添加到設置不同的超時，也是結構傳遞對象給changeImage()功能：

//Adding a timeout property and an interval reference to the structure 
var images = []; 
images[0] = {src: 'http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/Candle01.gif', timeout: 300, interval: null}; 
images[1] = {src: 'http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/Candle02.gif', timeout: 400, interval: null}; 
images[2] = {src: 'http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/Candle03.gif', timeout: 500, interval: null}; 
images[3] = {src: 'http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/Candle04.gif', timeout: 600, interval: null}; 

//e:=<img>, o:={src} 
function changeImage(e, o){ 
    e && (e.src = o.src) //Assigning the new src 
} 

//window.onload = function(){ 
    //Adding a dummy img element for testing.. 
    var tI = document.body.appendChild(document.createElement('img')); 

    //Setting an timeout for all of them, unless a man insist on interval, yet I can not see a use of it here 
    for(var i=0, j=images.length; i<j; i++){ 
     //Calling the changeImage() function and passing the new parameters 
     //Also we save the timeout/interval reference, in case it should be recalled or stopped 
     images[i].interval = window.setTimeout(function(e, o){ 
      changeImage(e, o) 
     }.bind(undefined, tI, images[i]), images[i].timeout) 
    } 
//}; 

https://jsfiddle.net/jk0ek2yk/

Answer 3

您只需要設置一個更復雜的數組，在每個元素中都有一個用於圖像和動畫的SRC的字段她的字段超時...例如，圖像[0] = {src：「path_to_image」，超時：14400000}，而不是使用間隔，您必須使用超時與每個不同的時間。

一個簡單的例子：

<script type="text/javascript"> 
var images = []; 
images.push({src: "http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/Candle01.gif", timeout: 14400000}); 
images.push({src: "http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/Candle02.gif", timeout: 2440000}); 
images.push({src: "http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/Candle03.gif", timeout: 4440000}); 

//Set the interval with the first element 
var x = 0; 
var timeout = window.setTimeout(function() {changeImage()},images[x].timeout); 

function changeImage() { 
    document.getElementById('candle').src = images[x].src; 
    if (x<images.length) { 
     x+=1; 
    }else{ 
     //Reset slider (i think that you want a slider :P) 
     x=0; 
    } 
    timeout = window.setTimeout(function() {changeImage()},images[x].timeout); 
} 
</script> 

Answer 4

如果我明白你的問題正確，然後將下面的代碼應該解決您的問題。

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<script type="text/javascript"> 
images = new Array; 
var time = [1000, 5000, 3000, 2000, 2000]; 
images[0] = "http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/Candle01.gif"; 
images[1] = "http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/Candle02.gif"; 
images[2] = "http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/Candle03.gif"; 
images[3] = "http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/Candle04.gif"; 
images[4] = "http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/Candle05.gif"; 
images[5] = "http://www.mountsinaiparks.org/digital-yahrzeit/wp-content/themes/yahrzeit-theme/Candle_images/candle_end.gif"; 
setTimeout(function() {changeImage()},5000); 
x = 0; 
function changeImage() { 
$("#candle").attr("src",images[x]); 
if (x<5) { 
x+=1; 
setTimeout(function() {changeImage()},time[x]); 
} 
else if (x=6) { 
x=5; 
} 

} 
</script> 

<body> 
<img id="candle"></img> 
</body> 

</html> 

我希望這有助於。如果您的查詢有所不同，請回來。