Question

我是JavaScript新手，我试图在用户点击按钮时更改两个不同的图像。我得到了第一个要更改的图像，但现在我不知道如何同时更改下一个图像......

它的工作方式如下：两者都以蓝色开头。点击鼠标后，左侧图像将显示以下序列（球蓝，带球，带球...），同一按钮点击右侧图像将显示以下内容（带球，蓝色，带球......）。

我让这个工作，但现在我如何以不同的顺序改变第二个图像（从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>

Answer 1

交替颜色的代码：

<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>

指定模式的代码：
两者都以蓝色开头。
下面是按钮点击后的模式
左：蓝红红...蓝红红...蓝红红（并重复相同的图案）
右：蓝红蓝红蓝蓝红..... [/ p>

<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>

Answer 2

var currentIndex = 0;
var imgsleft = new Array("ballblue.gif","ballred.gif");

function lampSwitch()
 {
      document.getElementById("left").src=imgsleft[currentIndex%2];
      currentIndex++; 
 }

：P

Answer 3

http://www.rocket99.com/techref/javascript8668.html此页面包含带有上一页和下一页按钮的图像查看器，我认为这对您有帮助。

单击按钮时交换两个图像

3 个答案: