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最多只持续一个小时，然后以一致的间隔设置其他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的字段和另一个用于超时的字段...例如，image [0] = {src：＆＃34; path_to_image＆＃34;，超时：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>

我希望这会有所帮助。如果您的查询不同，请回来。

在JQuery中设置图像的间隔

4 个答案: