0

私はJavaScriptを初めて使用し、ユーザーがボタンをクリックしたときに2つの異なる画像を変更しようとしています。最初の画像を変更しましたが、次の画像を同時に変更する方法がわかりません...

これは次のように機能します。どちらも青で始まります。マウスクリック後、左の画像には次のシーケンス（ballblue、ballred、ballred ...）が表示されます。同じボタンをクリックすると、右の画像には次のシーケンス（ballred、ballblue、ballred ...）が表示されます。

これを機能させることができましたが、2番目の画像を別の順序で変更するにはどうすればよいですか（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 に答える