Question

我的代码非常自我解释。假设在页面加载所有必要的图像之后，开始循环遍历横幅的相同的5个图像，其间有5秒的延迟。但是，当页面加载时它不会做任何事情。

<script type="text/javascript">
var counter = 0;
var bannerList = new Array();
bannerList[0] = "/portfolio/1.jpg"
bannerList[1] = "/portfolio/2.jpg"
bannerList[2] = "/portfolio/3.jpg"
bannerList[3] = "/portfolio/4.jpg"
bannerList[4] = "/portfolio/5.jpg"

function bannerRotator(){
    if(counter > 4){
        counter = 0;
    }
    document.getElementById("slide").src = bannerList[counter];
    counter = counter + 1;
    var t=setTimeout("bannerRotator()", 2000);
}
</script>

同时：

<body onLoad="bannerRotator();">

谁能看到我哪里出错了？谢谢你的帮助！

Answer 1

您可以使用setInterval代替setTimeout，并使用简单的模%使其旋转。例如：

setInterval(function(){
    changeImage( bannerList[counter++ % bannerList.length]);
}, 5000);

Answer 2

while (counter <= 4){
    var t=setTimeout("changeImage(bannerList[counter])", 5000);
    counter = counter + 1;

    if (counter > 4){
        counter = 0;
    }
}

那个，我的朋友，是一个无限循环，总是怀疑......它永远不会达到5.它崩溃的原因（至少对我而言）是因为它不等待超时结束才结束它再次循环。你可以考虑使用这样的东西：

此外，您不能将参数作为字符串传递（例如“changeImage（bannerList [counter]）”）。你需要像这样连接：

var t=setTimeout("changeImage('"+bannerList[counter]+"')", 1000);

然后实际上让它循环，你想在changeImage函数中再次调用超时（所以它在时间之后执行，而不是同时执行所有五个）。这意味着counter和bannerList都需要是全局的。然后通过一个小js monkey业务，您将获得以下版本：

var counter = 0;
var bannerList = new Array();

function bannerRotator(){
    bannerList[0] = "portfolio/1.jpg"
    bannerList[1] = "portfolio/2.jpg"
    bannerList[2] = "portfolio/3.jpg"
    bannerList[3] = "portfolio/4.jpg"
    bannerList[4] = "portfolio/5.jpg"


    var t=setTimeout("changeImage('"+bannerList[counter]+"')", 1000);

}
function changeImage(newImgLoc){
    document.getElementById("slide").src = newImgLoc;
    setTimeout("changeImage('"+bannerList[++counter%bannerList.length]+"')", 1000);
}

您可以在此处查看演示：Demo

如果你想真正看到图像变化，你需要插入它们的绝对路径。

Answer 3

尝试将"onLoad"更改为"onload" ...看看是否有帮助

Answer 4

尝试

setTimeout("changeImage(bannerList[counter])", 5000);

而不是

var t=setTimeout("changeImage(bannerList[counter])", 5000);

所以输出函数，现在它将它设置为变量

// EDIT

<img id="slide" src="portfolio/4.jpg">是您在firebug中的输出，它会更改demo

中的图片

Answer 5

问题是做someElement.src = 'http://...';没有做任何事情。它在对象someElement上设置了一个属性，但它不会更改HTML属性（它适用于某些元素的某些属性，例如someLink.href =或someInput.name =，但这些属性是特殊情况）。你应该做的是使用setAttribute()方法，例如：

var counter = 0;

function changeImage(newImgLoc){
  document.getElementById("slide").setAttribute('src', newImgLoc);
}

Javascript图像旋转器问题

5 个答案: