0

我是 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>
4

3 回答 3

2

交替颜色代码：

<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>
于 2012-07-25T03:56:36.343 回答
1 
var currentIndex = 0;
var imgsleft = new Array("ballblue.gif","ballred.gif");

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

:p

于 2012-07-25T03:51:04.923 回答
0

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

于 2012-07-25T03:45:46.657 回答