X毫秒后替换并循环显示图像

我无法正常工作，我只是想让图像无限循环。什么不在这里？X毫秒后替换并循环显示图像

var croppingImages = new Array() 
 
croppingImages[0] = "https://img.f1today.eu/x/topstory/58c7e187745517a1c90fc5ebe21c55da49223c999500b.jpg"; 
 
croppingImages[1] = "https://pbs.twimg.com/media/C69Y8aWW0AEkCIW.jpg:small"; 
 
setTimeout("animateImages()", 100); 
 
var cropImg = 0; 
 
    
 
function animateImages() { 
 
    document.getElementById("cropping__animation").src = croppingImages[cropImg] 
 
    x++; 
 
}

<img src="https://img.f1today.eu/x/topstory/58c7e187745517a1c90fc5ebe21c55da49223c999500b.jpg" id="cropping__animation">

来源

2017-03-15 GoldenGonaz

你没有定义'x'。您只需调用一次'animateImages'。 – dfsq

我添加了cropImg ++，但它仍然没有工作： @dfsq – GoldenGonaz

有几件事情在这里。

1）cropImg永远不会增加，所以animateImages将始终显示相同的图像

2）animateImages将永远只能一次通过setTimeout

调用此代码更好地工作：

var cropImg = 0; 
var croppingImages = new Array() 

croppingImages[0] = "https://img.f1today.eu/x/topstory/58c7e187745517a1c90fc5ebe21c55da49223c999500b.jpg"; 
croppingImages[1] = "https://pbs.twimg.com/media/C69Y8aWW0AEkCIW.jpg:small"; 

animateImages(); 

function animateImages() { 
    document.getElementById("cropping__animation").src = croppingImages[cropImg]; 

    if (++cropImg > croppingImages.length - 1) 
    { 
    cropImg = 0; 
    } 

    setTimeout(function() { 
    animateImages(); 
    }, 3000); 
}

https://jsfiddle.net/y6bhgm53/5/

来源

2017-03-15 15:35:18 paul

如果你想循环他们无尽的你也许笑uld使用setInterval（）而不是setTimeout（）。你也应该让你的cropImg变量通过检查值是否大于数组长度来循环。

https://jsfiddle.net/nyxeen/y6bhgm53/6/

我希望它能帮助

var croppingImages = new Array() 
 
croppingImages[0] = "https://img.f1today.eu/x/topstory/58c7e187745517a1c90fc5ebe21c55da49223c999500b.jpg"; 
 
croppingImages[1] = "https://pbs.twimg.com/media/C69Y8aWW0AEkCIW.jpg:small"; 
 
setInterval(animateImages, 100); 
 
var cropImg = 0; 
 

 
function animateImages() { 
 
    document.getElementById("cropping__animation").src = croppingImages[cropImg] 
 
    cropImg++; 
 
    if(cropImg>=croppingImages.length)cropImg=0 
 
}

<img src="https://img.f1today.eu/x/topstory/58c7e187745517a1c90fc5ebe21c55da49223c999500b.jpg" id="cropping__animation">

来源

2017-03-15 15:43:01 Nyxeen

X毫秒后替换并循环显示图像

回答

相关问题