1

javascriptを使用してサムネイルスライドショーを作成しようとしています。私はJavascriptに非常に慣れていないので、それを行う方法は少し奇妙かもしれません...

私が遭遇している問題は、メイン画像があり、次に4つのサムネイルがあることです。最初のサムネイルをクリックすると、メイン画像と最初のサムネイルが変更されます。ただし、変更したサムネイルをクリックすると、メイン画像を別の写真（新しいサムネイルに対応する写真）に変更する必要があります。

次のような呼び出しで関数を初期化します。

document.getElementById('thumb1').onclick=thumbs1;

この関数を使用するもの：

function thumbs1(){
    num1 = 1;
    num2 = 0;
    var src1 = largeArray[num1];
    var src2 = thumbArray[num2];
    document.getElementById('main').src=src1;
    document.getElementById('one').src=src2;
    document.getElementById('one').id='change';
}

そして、新しいサムネイルのIDを「変更」に変更して、次のような別の関数を呼び出そうとしています。

document.getElementById('change').onclick=changed;

そして、これは次の関数を使用しました：

function changed(){
    num1 = 0;
    var src1 = largeArray[num1];
    document.getElementById('change').src=src1;
    document.getElementById('change').id='one';
}

Firebugを使用しているときにエラーを見つけましたが、これはへの呼び出しが原因であると考えていますdocument.getElementById('change').onclick=changed;。IDを変更した関数をまだ呼び出していないため、ブラウザは要素IDの「変更」を見つけることができません。

誰かがこの問題を解決する方法を知っていますか？（私はコードが低品質であることを知っています...私は自分自身を教えています）

このページへのライブリンクは次のとおりです。マイページ

助けてくれてありがとう！

4

1 に答える 1

1 
var array = //id's of your images here. you could type them static or search your document for images and get their id attribute.

document.addEventListener("click", function(e){
    var clicked_image = e.target || e.srcElement; //using jquery can help with this cause older versions of IE are stupid, but depends on if you want to support them. 
    var id = clicked_image.getAttribute(id);
    var temp = document.getElementById("main").src;

    for (var i = 0; i < array.length; i++){
        if(array[i] == id){
            document.getElementById("main").src = clicked_image.src;
            clicked_image.src = temp;
        }
    }
})

eventlistenersそれは非常に迅速で汚いので、画像だけに割り当てる方がよいでしょう。上記と同じ構文を使用しますが、何をすべきかがわかります。

これにより、どの画像がクリックされたかを気にする必要がなくなり、メインを変更するだけで、サムをメインがあったものに変更できます。そのため、各画像が何であるかを追跡する手間が省けます。

于 2012-12-03T04:19:32.127 に答える