1

所以在我的谷歌浏览器新网站上，我试图使用 setInterval 函数每 5 秒切换一次图像。这似乎可行，但是我遇到的问题是无法将属性 src 设置为 null。

var images = new Array();
images[0] = "/images/grilled-chicken-large.png";
images[1] = "/images/sizzly-steak.png";
var img = document.getElementById("img");

function changeImage() {
     for (var i = 0; i < 3; i++) {
        img.src = images[i];
        if (i == 2){i = i - 2;};
     }
}

window.onload=setInterval("changeImage()", 5000);

我知道问题是我试图在页面加载完成之前获取 id 为 img 的元素，但我已经有了一个 window.onload，所以我不知道该怎么做。另外，如果我创建一个包含 setInterval 和 img 变量的 init() 函数，页面就会冻结。

有任何想法吗？

4

4 回答 4

3

问题是您访问2的数组元素只有两个元素（0 和 1）。

但是您的脚本中也存在逻辑错误：您将当前可见图像的索引存储在哪里？您需要一个保存该索引的全局变量。

var currentIndex = 0;
function changeImage() {
    // Switch currentIndex in a loop
    currentIndex++;
    if (currentIndex >= images.length)
        currentIndex = 0;

    var img = document.getElementById("img");
    img.src = images[currentIndex];
}

document.onload = function() {
    setInterval(changeImage, 5000);
}

我已将img变量移动到函数中，以便在文档加载后五秒钟后分配它。

澄清一下：JavaScript 是一种基于事件的编程语言。这意味着每次间隔触发时都会执行幻灯片更改代码，执行一些工作（切换到下一张幻灯片）然后完成，以便浏览器可以呈现页面。如果循环遍历幻灯片，浏览器将无法显示新幻灯片，因为脚本仍在幻灯片之间执行。解决方案就是我发布的内容：定义一个替换循环变量的全局变量，并在每次显示下一张幻灯片时递增它。

于 2012-07-30T21:34:57.513 回答
1

这里：

window.onload = function () {

    var images = [
        'http://placekitten.com/100/200',
        'http://placekitten.com/200/100',
    ];

    var img = document.getElementById( 'img' );

    setInterval(function () {
        img.src = img.src === images[0] ? images[1] : images[0];
    }, 1000 );

};

现场演示：http: //jsfiddle.net/wkqpr/

如果你有两个以上的图像，你可以这样做：

window.onload = function () {

    var images = [
        'http://placekitten.com/100/200',
        'http://placekitten.com/200/100',
        'http://placekitten.com/200/150',
        'http://placekitten.com/150/300'
    ];

    images.current = 0;

    var img = document.getElementById( 'img' );

    setInterval(function () {
        img.src = images[ images.current++ ];
        if ( images.current === images.length ) images.current = 0;       
    }, 1000 );

};

现场演示：http: //jsfiddle.net/wkqpr/1/

于 2012-07-30T21:38:32.187 回答
0

你的 for 循环看起来很奇怪。试试那个循环：

function changeImage(){
  if(!img.attributes["index"]){img.attributes["index"]=0;return;};
  img.attributes["index"]++;
  img.src=images[img.attributes["index"]];
}
window.onload=function(){
  window.img=document.getElementById("img");
  setInterval("changeImage()",5000)
}

应该管用。
您会注意到我将图像索引存储在图像的属性中，而不是全局变量。我认为全局稍微快一些，但将其存储在图像中意味着如果需要，您可以轻松地将其扩展到多个图像。此外，您的浏览器冻结的问题是以下代码：

for(var i=0;i<3;i++){
  //Some more stuff
  if(i==2){i-=2};
}

这个循环是无限的，因为无论何时i到达2，i==2都变为真，这意味着迭代将重置i为0并重新开始。防止这种情况的唯一方法是在break;某个地方，我在任何地方都看不到。提示：在 for 循环中篡改索引变量通常是个坏主意。

于 2012-07-30T21:36:58.513 回答
0 
function changeImage() 
{
    for (var i = 0; i < 2; i++) 
    {
        img.src = images[i];
     }
}


window.onload=function()
{
    setInterval(changeImage,5000);
}

您在 for 循环中的最后一行完全没用，只会使事情复杂化，此外，您设置窗口 onload 事件的方式也不标准！

编辑：该src属性为空，因为很明显，您的数组大小只有 2！

于 2012-07-30T21:53:30.727 回答