2

JS を約 1 か月間学習し、約 4 つのコースを完了した後でも、サムネイルをクリックしたときに画像を変更する方法がわかりません。私がやりたいことは簡単です。サムネイルがクリックされたときにメイン画像を変更したいだけです! この例では、div に 2 つのサムネイル画像があり、その上にメイン画像があります。サムネイルをクリックしたときにメイン画像を変更したいだけです。私はこれが DOM 操作であることを知っており、次のように考えています。

私は小さなページを作成して、さまざまなことを学び、試してみて、最後にあきらめて助けを求めることができるようにしました! コードは次のとおりです。

#MainContainer {
position: relative;
margin:0px auto;
width: 500px;
height: 400px;
border: 1px solid black;
}
#MainImage {
position: absolute;
top: 10px;
left: 50px;
width: 398px;
height: 265px;
background: url(MainImage01.jpg);
border: 1px solid black;
}
#TNBodyContainer {
position: absolute;
top: 290px;
left: 100px;
border: 1px solid black;
width: 268px;
height: 88px;
}
#TNOne {
position: relative;
width: 133px;
height: 88px;
background: url(SmallImage01.jpg);
}
#TNTwo {
position: relative;
left:135px;
width: 133px;
height: 88px;
background: url(SmallImage02.jpg);
}

<body>
<div id="MainContainer">
    <div id="MainImage"></div>
    <div id="TNBodyContainer">
        <div id="TNOne">
            <div id="TNTwo"></div>
        </div>
    </div>

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

マーゲート

4

2 に答える 2

3

いずれかのサムネイルがクリックされたときに画像を変更するには、スクリプトを追加する必要があります。この関数は、ページが読み込まれたときに呼び出されます。画像の名前は適宜変更してください。これは、html ページのセクションに配置する必要があります。

<script>
window.onload = function() {
        var mainImg = document.getElementById('Main');

        document.getElementById('TNOne').onclick = function() {
                mainImg.src = 'main1.jpg';
                //alert('one clicked');
        };
        document.getElementById('TNTwo').onclick = function() {
                mainImg.src = 'main2.jpg';
                //alert('two clicked');
        };
};
</script>

2 つのサムネイル div<img>は、同じ ID を持つタグになります。同様に、main<img>も定義されています (id="Main" を使用)。要素をクリックできるようになりました。

<div id="MainContainer">
    <div id="MainImage">
        <img id="Main" src="MainImage01.jpg"</img>
    </div>
    <div id="TNBodyContainer">
        <img id="TNOne" src="thumb1.jpg"></img>
        <img id="TNTwo" src="thumb2.jpg"></img>
    </div>
</div>

最後に、サムネイルの CSS です。ここでは float を使用して、サムネイルを TNBodyContainer div 内の同じ行に保持します。

TNOne {
width: 133px;
height: 88px;
float:left;
}
#TNTwo {
width: 133px;
height: 88px;
float:left;
}
于 2013-03-22T00:52:24.867 に答える
1

CSS background プロパティの画像を変更するには、使用する必要があります

document.getElementById("MainImage").style.background

正しい方法は、イベント リスナーを追加することです。

 document.getElementById("TNOne").addEventListener("click", function (event) {
          setImage(event);
      }, false);
      document.getElementById("TNTwo").addEventListener("click", function (event) {
          setImage(event);
      }, false);

  }

どちらも同じ関数を呼び出しますが、イベントを使用すると、「event.target.id」でどちらが「クリック」されたかを確認できます。

次に、switch ステートメントなどで何をしたいかを決めることができます。基本的に言っている: if event.target.id == "TNOne".

私があなたをフィドルにしたこのすべてを見ることができます：http://jsfiddle.net/djwave28/32pQD/3/

HTML と CSS にも若干の変更があります。

于 2013-03-22T01:08:20.220 に答える