Question

所以在我们的学校项目中，我们正在网上创建一个图库。我希望有三个带图像的块，其中所有三个块在三个图像之间旋转（总共9个）。

像这样[] [] []，其中每个块都是“图像块”，在这三个图像块中，图像将在更多图像之间旋转。

问题是我发现了一个有效的代码片段。第一个答案。链接：How to change image-background after sometime?

此代码适用于我的一个图像块。所以我复制了函数并更改了函数名，它适用于其中两个。现在我对第三个做了完全相同的事情，但随后图像旋转在所有三个上停止。

它说。然后停止。如果我删除三个“changeimage”中的一个，它将起作用，两个将旋转，但当三个都在那里时，它们都不起作用。

有人想重新创建我的问题吗？

我的HTML（非常简短的版本，请注意imglinks不是真正的链接，而是样本）：

<body onload='changeimage(2); changeimage2(2); changeimage3(2);'>
<img id='myimage' src='imglink'/>
<img id='myimage2' src='imglink2'/>
<img id='myimage3' src='imglink3'/>

我的javascript与链接完全相同，只是我将其复制并粘贴了三次，并将函数名称更改为代码片段中的onload内容。我更改了myimage id，设置超时中的函数名称和图像源。

一切正常。但是当我同时使用它们全部三个时它就不会工作了。无论哪两个，它们中的两个都可以一起工作，但这三个都不能同时工作。

TLDR;不会一起工作，但两个人一个人会一起工作。

有什么建议吗？ :)问你是否理解，我会尽力解释。

Answer 1

您发布的功能取决于外部变量“imageID”。如果你复制了3次函数，那么你也需要复制外部变量。

示例：

<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
    //change the image
    if(!imageID){
        document.getElementById("myimage").src="http://www.all-freeware.com/images/full/38943-nice_feathers_free_screensaver_desktop_screen_savers__nature.jpeg";
        imageID++;
    }
    else{if(imageID==1){
        document.getElementById("myimage2").src="http://www.hickerphoto.com/data/media/186/flower-bouquet-nice_12128.jpg";
        imageID++;
    }else{if(imageID==2){
        document.getElementById("myimage3").src="http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg";
        imageID=0;
    }}}
    //call same function again for x of seconds
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}

var imageID2=0;
function changeimage2(every_seconds){
    //change the image
    if(!imageID2){
        document.getElementById("myimage").src="http://www.all-freeware.com/images/full/38943-nice_feathers_free_screensaver_desktop_screen_savers__nature.jpeg";
        imageID2++;
    }
    else{if(imageID2==1){
        document.getElementById("myimage2").src="http://www.hickerphoto.com/data/media/186/flower-bouquet-nice_12128.jpg";
        imageID2++;
    }else{if(imageID2==2){
        document.getElementById("myimage3").src="http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg";
        imageID2=0;
    }}}
    //call same function again for x of seconds
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}

var imageID3=0;
function changeimage3(every_seconds){
    //change the image
    if(!imageID3){
        document.getElementById("myimage").src="http://www.all-freeware.com/images/full/38943-nice_feathers_free_screensaver_desktop_screen_savers__nature.jpeg";
        imageID3++;
    }
    else{if(imageID3==1){
        document.getElementById("myimage2").src="http://www.hickerphoto.com/data/media/186/flower-bouquet-nice_12128.jpg";
        imageID3++;
    }else{if(imageID3==2){
        document.getElementById("myimage3").src="http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg";
        imageID3=0;
    }}}
    //call same function again for x of seconds
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>

Answer 2

我不确定问题是onload是否可以包含要调用的函数列表，或者脚本中是否存在某些内容（此处缺少）是错误的。无论如何，在onLoad中有一个函数列表似乎不是一个好习惯。我会编写一个处理onLoad的专用函数，并从那里调用这3个函数。

所以html看起来像这样

<body onload='onLoadHandler()'>
<img id='myimage' src='imglink'/>
<img id='myimage2' src='imglink2'/>
<img id='myimage3' src='imglink3'/>

您的脚本将如下所示：

function onLoadHandler(){
  changeimage(2); 
  changeimage2(2); 
  changeimage3(2);
}

// rest of your script
</script>

此外，我会假设有三个改变图像功能是无关紧要的。对于不同的图像，它们可能会做三次几乎相同的事情。因此，在下一步中，我会将它们缩减为单个函数，并将更改部分作为参数传递给函数。这样的事情。

<script type='text/javascript'>

function onLoadHandler(){
  changeimage(2,'myimage'); 
  changeimage(2,'myimage2'); 
  changeimage(2,'myimage3'); 
}

function changeimage(numberParameter, imageId){
   // your logic usining imageId instead of a fixed, hardcoded id

}

</script>

Answer 3

通过查看您链接到的代码，我的直接猜测是您没有为每个函数重新声明imageID变量以拥有自己的代码，这可能会导致问题。

但是，我应该注意，重新声明你所描述的函数是错误的方法 - 函数的重点是代码是可重用的，所以你不必重写它。正如Daniel所建议的那样，使用图像DOM id的附加参数是解决该问题的最佳方法。

我在这里重写了这个函数，稍微改进了逻辑并允许重复使用该函数：

http://jsfiddle.net/Ebp75/

Body onload功能不适用于三个功能

3 个答案: