Question

因此，在谷歌浏览器的new website上，我尝试使用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（）函数，页面会冻结。

有什么想法吗？

Answer 1

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

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

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

Answer 2

下面：

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/

Answer 3

你的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就会变为true，这意味着迭代会将i重置为0并启动它一遍又一遍。防止这种情况的唯一方法是某处break;，我在任何地方都看不到。提示：在for循环中篡改索引变量通常是个坏主意。

Answer 4

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


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

你在for循环中的最后一行是完全没用的，只是让事情变得复杂，另外，您设置窗口onload事件的方式不是标准的！

编辑：src属性为null，因为很明显，你的数组大小只有2 !!

未捕获的TypeError不能将属性'src'设置为null

4 个答案: