0

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

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

问题是我找到了一个有效的代码片段。第一个答案。链接：如何在一段时间后更改图像背景？

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

它说 。然后它停止。如果我删除三个“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 与链接中的完全相同，只是我复制并粘贴了 3 次，并将函数的名称更改为代码片段中 onload 中的名称。我更改了 myimage id、设置超时的函数名称和图像源。

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

TLDR；不会一起工作，但两个和一个自己会。

有什么建议么？:) 问你是否不明白，我会尽力解释得更好。

4

3 回答 3

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>
于 2013-05-23T15:02:55.673 回答
0

我不太确定问题是否在于 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>

此外，我认为拥有三个 changeimage 函数是不必要的。对于不同的图像，他们可能会做几乎相同的三倍。因此，在下一步中，我会将它们简化为一个函数，并将更改部分作为参数传递给函数。像这样的东西。

<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>
于 2013-05-23T14:59:36.613 回答
0

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

但是，我应该注意，按照您的描述重新声明函数是错误的方法 - 函数的全部意义在于代码是可重用的，因此您不必重新编写它。正如 Daniel 所建议的，为图像 DOM id 使用附加参数是解决该问题的最佳方法。

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

http://jsfiddle.net/Ebp75/

于 2013-05-23T15:18:28.963 回答