0

私はJavascriptが初めてで、画像間を移動する方法を理解しようとしていました。私の目標は、html の画像プレースホルダーのコードを変更して、ボタンをクリックするたびに次の画像に変更することです。ある画像を別の画像 (getElementById("mainImage").src="image2.jpg";) に変更する方法を理解しましたが、次のボタン クリックで "image3" に到達できるようにする必要があります。変数を使用する必要があると思いますが、これを機能させる方法がわかりません...

4

2 に答える 2

3

これらの変数をグローバルとして宣言することになりますが、おそらくこれが先に進むための最も簡単な方法です。

var images = ["image1.jpg", "image2.jpg", "image3.jpg"];
var currentImage = 0; //defaults to image1.jpg

function goNext() {
    currentImage += 1;

    //loop back to the first image
    if(currentImage >= images.length) {
        currentImage = 0;
    }

    document.getElementById("mainImage").src = images[currentImage];
}

したがって、ボタンのクリックに対して goNext() を呼び出すだけです。

基本的に、ここで行われているのは、配列が項目のリストであるということです。この場合、どこかの画像への参照である文字列です。配列にインデックスを付けることで、配列からアイテムを取得できます。これは、最初のアイテムをくださいと言っているようなものです。Javascript では、images[0] になります。

于 2012-06-17T18:27:12.633 に答える
2

スクリプトの前にいくつか追加してvar key = 0;から、スクリプトでクリックイベントのアクションを与えることができます

var image = "image" + key + ".jpg";
getElementById("mainImage").src= image;
if(key == max){
 key = 0;
}else{
 key++;
}

max は画像数です。

しかし、jQueryにはもっと簡単でより良い解決策があると思います:)

于 2012-06-17T18:26:43.520 に答える