1

サムネイル画像がクリックされるたびに交換されるメイン画像を含む単純な画像ギャラリー ページに取り組んでいます。私がやっている方法は JQuery の方がはるかに簡単であることはわかっていますが、JQuery に進む前に JS をよく理解しようと決心しています。

問題は次のとおりです。サムネイル画像をクリックすると、変更されるのはメイン画像だけです。私はJSコードに親しみを感じており、私がここで間違ったことを理解している誰かが少し調整する必要があるだけだと思います! 私がやろうとしているのは、getElementById (URL) と交換だけです!

画像を JS フィドルにアップロードする方法がわからないため、私の例は画像が少ないですが、すべてのコードがあり、ローカルで画像を使用して正常に動作しています。

http://jsfiddle.net/Margate/zJjys/

コードは次のとおりです。

<html>
<head>
<title>Confused!</title>

<style type="text/css">
#main-image-container{width: 1000px; height: 350px; position: absolute; top: 172px; left: 0px; border: 1px solid black; overflow-x: auto; overflow-y: hidden;}
#graffiti-panorama-image-bar{width: 600px; height: 95px; position: absolute; top: 540px; left: 200px; border: 1px solid black; overflow: auto; background-color: white;}
.image{position: absolute; cursor: pointer;}
#center-page{border:1px solid red; width: 1005px; height: 700px; position:  absolute; margin: 0px auto;}


<body>
<div id="center-page">

<div id="main-image-container">
<img id="image" src="image-01.jpg" />
</div>

<div id="graffiti-panorama-image-bar">
<img src="small-01.jpg" onclick="Main1()" class="image" style=" left: 0px;" />
<img src="small-02.jpg" onclick="Main2()" class="image" style=" left: 307px;" />
<img src="small-03.jpg" onclick="Main3()" class="image" style=" left: 626px;" />
<img src="small-04.jpg" onclick="Main4()" class="image" style=" left: 941px;" />
<img src="small-05.jpg" onclick="Main5()" class="image" style=" left: 1260px;" />
</div>
</div>

<script type="text/javascript">
function Main1(){var obj=document.getElementById("image").style; obj.src="image-01.jpg";}
function Main2(){var obj=document.getElementById("image").style; obj.src="image-02.jpg";}
function Main3(){var obj=document.getElementById("image").style; obj.src="image-03.jpg";}
function Main4(){var obj=document.getElementById("image").style; obj.src="image-04.jpg";}
function Main5(){var obj=document.getElementById("image").style; obj.src="image-05.jpg";}
</script>

</body>
</html>
4

2 に答える 2

1

lanのコメントをフォローアップするには： 

<div id="main-image-container">
<img id="image" src="image-01.jpg" />
</div>

<div id="graffiti-panorama-image-bar">
<img src="small-01.jpg" onclick="Main('image-01.jpg')" class="image" style=" left: 0px;" />
<img src="small-02.jpg" onclick="Main('image-02.jpg')" class="image" style=" left: 307px;" />
<img src="small-03.jpg" onclick="Main('image-03.jpg')" class="image" style=" left: 626px;" />
<img src="small-04.jpg" onclick="Main('image-04.jpg')" class="image" style=" left: 941px;" />
<img src="small-05.jpg" onclick="Main('image-05.jpg')" class="image" style=" left: 1260px;" />
</div>
</div>

<script type="text/javascript">
function Main(image) {
        document.getElementById("image").src=image;
    }
</script>

</body>
</html>
于 2013-06-11T21:24:13.557 に答える