0

JavaScript、HTML、HTML DOM、および DHTML のヘルプが必要です。JavaScript にはあまり詳しくありませんが、JavaScript と HTML を使用して Web サイトを作成しようとしています。ここに状況があります、

div                          div
main image                   main image

image1                       image1
image2                       image2
image3                       image3 
                             image4

デフォルトでは、ページの読み込み時にメイン画像として image1 が表示され、ユーザーがその div の下の画像をクリックすると、メイン画像が置き換えられます。

function ChangesSrc()
{
    if(x == 0)
    {
        x = 1;
        document.getElementById('image1').src = "";
        document.getElementById('image1').style.width = "306px";
        document.getElementById('image1').style.height = "230px";   
    }
    else if(x == 1)
    {
        x = 2;
        document.getElementById('image1').src = "";
        document.getElementById('image1').style.width = "306px";
        document.getElementById('image1').style.height = "230px";       
    }
    else if(x == 2)
    {
        x = 0;
        document.getElementById('image1').src = "";
        document.getElementById('image1').style.width = "306px";
        document.getElementById('image1').style.height = "230px";           
    }
    else
    {
        x = 0;
        document.getElementById('image1').src = "";
        document.getElementById('image1').style.width = "306px";
        document.getElementById('image1').style.height = "230px";       
    }

}
</script>

私の問題は、クリックイベントですべての画像に対して画像srcを指定する必要があり、画像を順番に表示する必要があることです（最後の画像を最初にクリックすると、最初の画像がメイン画像のみとして表示されます）。

誰でも私を案内できますか？

4

3 に答える 3

1

CSS を使用して小さな画像 ( .thumbs) とメイン画像 ( #main)のスタイルを設定したため、詳細の一部が欠けている可能性がありますが、次のことをお勧めします。

function show(el) {
    if (!el) {
        // function requires a reference to the clicked element, here 'el'
        return false;
    }
    else {
        // finds the element with id="main"
        var showIn = document.getElementById('main'),
            // sets the sISrc variable with the src of the showIn element
            sISrc = showIn.src,
            // sets the variable 'elSrc' with the src value of the clicked element
            elSrc = el.src;
        // re-sets the src of the 'main' element with the src of the clicked element
        showIn.src = elSrc;
        // sets the clicked element's src to the (previous) value of the 'main' element
        el.src = sISrc;
    }
}

// finds all the images
var images = document.getElementsByTagName('img');

for (var i = 0, len = images.length; i < len; i++) {
    // iterates through all the images and assigns an 'onclick' event-handler
    images[i].onclick = function() {
        // passes the current image into the show() function when clicked
        show(this);
    };
}​

JS フィドルのデモ。

上記のコードを編集して、...gallery の複数のインスタンスを許可するように修正しました。このバージョンは、.main要素にのみ影響します (同じ識別子を持つ複数の要素が存在するか、存在する可能性があるため、class名前に切り替えましたが、現在はバージョンでは、イメージが同じ (直接の) 親内にある必要があります ( el.parentNode):

function show(el) {
    if (!el) {
        return false;
    }
    else {
        var showIn = el.parentNode.getElementsByClassName('main')[0],
            sISrc = showIn.src,
            elSrc = el.src;
        showIn.src = elSrc;
        el.src = sISrc;
    }
}

var images = document.getElementsByTagName('img');

for (var i = 0, len = images.length; i < len; i++) {
    images[i].onclick = function() {
        show(this);
    };
}​

JS フィドルのデモ。

参考文献:

于 2012-06-15T22:09:23.220 に答える
0

次のデモをまとめました。これは、一連の画像要素をグループの最上位にあるメインの画像要素と交換する方法を示しています。

window.onload要素が解析されてDOMに追加されるまで要素イベントハンドラーをアタッチできないため、イベントハンドラーも含めました。これは、（ほとんどの場合）Javascript内で発生するエラーを防ぐのに役立ちます。

これは、ページの読み込み前または読み込み中にスクリプトを実行することに関連する問題を処理する唯一の方法ではありません（たとえば、スクリプト呼び出しはインラインで実行され、起動前に 既に解析された要素にアクセスしますwindow.onload）。しかし、これは、より小さく、より手続き型のスクリプトに対する一般的な、ほとんど耐久性のあるソリューションです。

<div id="imgs">
    <div>
        <img id="mainimg" src="http://goo.gl/UohAz"/>
    </div>
    <img src="http://www.gravatar.com/avatar/f893555be713a24dee52230712cdde3a?s=128&d=identicon&r=PG"/>
    <img src="http://www.gravatar.com/avatar/495d675e3bc42ed1dee469e2ce701f1b?s=128&d=identicon&r=PG"/>
    <img src="http://www.gravatar.com/avatar/db5a61382c2ba7309071c323edb4013b?s=128&d=identicon&r=PG"/>
</div>

window.onload = function() {
    var imgs = document.getElementById('imgs').getElementsByTagName('img'),
        mainimg = document.getElementById('mainimg'),
        i = imgs.length,
        lastimg;

    var swap = function() {
        var old = mainimg.src;

        mainimg.src = this.src;
        this.src = old;
    };

    while (i--) {
        img = imgs[i];
        img.id = 'img-' + i;

        if (img.parentNode.id == 'main-img') {
            lastimg = img.id;
        }

        img.onclick = swap;
    }
};

http://jsfiddle.net/userdude/yq9Fq/

于 2012-06-15T22:08:03.720 に答える
0 
function openimage(mainimageurl)
{

        document.getElementById('Idofthebimage').src =mainimageurl;
        //set the width height once in css  

 }

今、すべての画像にこれを書いてください、onclick="openimage(this.src)"または大きな画像のURLが異なる場合はonclick="openimage('theurlofthebiggerimage')"

于 2012-06-15T21:34:53.643 に答える