单击按钮时交换两个图像

Swapping two images on button click

本文关键字：两个 图像 按钮 交换 单击      更新时间：2024-01-30

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

它的工作原理是这样的：两者都以蓝色开头。鼠标点击后，左侧图像将显示以下顺序（ballblue，ballred，ballrred…）。点击同一按钮后，右侧图像将显示如下顺序（ballred、ballrlue、ballred…）。

我做到了，但现在我该如何以不同的顺序更改第二个图像（开始时为ballblue.gif，然后点击按钮，点击ballred.gif，然后是ballbluegif，最后是ballredgif？

这是我到目前为止的代码：

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

var currentIndex = 0;
var imgsleft = new Array("ballblue.gif","ballred.gif");
function lampSwitch()
 {
      document.getElementById("left").src=imgsleft[currentIndex%2];
      currentIndex++; 
 }

：p

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

相关文章：