我是 JavaScript 新手，我试图在用户单击按钮时更改两个不同的图像。我要更改第一个图像，但现在我不知道如何同时更改下一个图像...
它的工作原理如下:两者都以蓝色开始。单击鼠标后，左侧图像将显示以下序列(ballblue，ballred，ballred...)，单击同一按钮的右侧图像将显示以下序列(ballred，ballblue，ballred...)。
我已经做到了这一点，但现在如何以不同的顺序更改第二个图像(从 ballblue.gif 开始，然后单击按钮到 ballred.gif，然后是 ballblue.gif，最后是 ballred.gif ？
这是迄今为止我的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title></head>
<script type="text/javascript">
imgsleft=Array("ballblue.gif","ballblue.gif","ballred.gif","ballred.gif");
var x=0;
function lampSwitch()
{
document.getElementById("left").src=imgsleft[++x];
if (x==3) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
<body>
<img src="ballblue.gif" id="left" alt="alttext" height="12" width="12"/>
<img src="ballblue.gif" id="right" alt="alttext" height="12" width="12"/>
<form action="#">
<p><input type="button" value="Switch" onclick="lampSwitch()" /></p>
</form>
</body>
</html>
最佳答案
交替颜色代码:
<html>
<head><title>Lamp Switch</title></head>
<script type="text/javascript">
imgsleft=Array("ballblue.gif","ballred.gif");
var x=0;
function lampSwitch(){
if(++x % 2){
document.getElementById("left").src=imgsleft[0];
document.getElementById("right").src=imgsleft[1];
}else{
document.getElementById("left").src=imgsleft[1];
document.getElementById("right").src=imgsleft[0];
}
}
</script>
<body>
<img src="ballblue.gif" id="left" alt="alttext" height="12" width="12"/>
<img src="ballblue.gif" id="right" alt="alttext" height="12" width="12"/>
<form action="#">
<p><input type="button" value="Switch" onclick="lampSwitch()" /></p>
</form>
</body>
</html>
指定模式的代码:
两者都以蓝色开头。
下面是按钮点击后的图案
左:蓝红红...蓝红红...蓝红红(并重复相同的图案)
右:蓝红蓝红蓝红蓝.....
<script type="text/javascript">
imgsleft = Array("ballblue.gif","ballred.gif");
pattern = Array("ballblue.gif","ballred.gif","ballred.gif");
var x=0;
var y=0;
function lampSwitch(){
if(++x % 2){
document.getElementById("right").src=imgsleft[1];
}else{
document.getElementById("right").src=imgsleft[0];
}
y++;
if(y == 3){
y = 0;
}
document.getElementById("left").src=pattern[y];
}
</script>
关于javascript - 单击按钮交换两个图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11642352/