javascript - JavaScript を使用した画像置換ループ

Question

だから私はW3で画像置換技術を学んでいます。ここに私が欲しいものがあります:

1. 犬の像があります。

2. この画像をクリックすると、この画像が猫の絵に置き換わります。

3. ただし、この画像をもう一度クリックすると、元の犬に置き換えられます。

4. もう一度クリックすると、犬が猫に置き換わります。

5. 等々。

これら 2 つの画像を置き換える永続的なループを作成するにはどうすればよいですか?

ここに私がやりたいことに似たリンクがあります：

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_src

その例では、画像をクリックすると、画像が 1 回置き換えられます。ただし、もう一度クリックしても、元の画像は置き換えられません。

ええ、オリジナルを常に新しい画像に置き換えることができる効率的なアルゴリズムを作成するための助けがあれば、大歓迎です.

Answer 1

これを試して、

<img id="img" src="cat.jpg" />​

jQueryを使ったJavaScript、

$('#img').toggle(
    function(){
        $(this).attr('src', 'dog.jpg');
    },
    function(){
        $(this).attr('src', 'cat.jpg');
    }
);​

これが実際のデモですhttp://jsfiddle.net/D9VvV/

Answer 2

画像を配列に入れ、変数を使用して次に表示する画像を追跡します。

var images = ["hackanm.gif", "compman.gif"];
var index = 0;

function changeSrc() {
  document.getElementById("myImage").src = images[index];
  index = (index + 1) % images.length;
}