htmlの同じスライダーを作る方法

Question

私は既に画像のサムネイルが付いたスライダーを作っています。私は同じものを私のページで使っていますが、htmlで同じコードを使うときは、これは私が作りたいものですthis is my page image

<script> 

    function changeImage(event) { 
    event = event || window.event; 

    var targetElement = event.target || event.srcelement; 

    if (targetElement.tagName == "IMG") { 
    document.getElementById("mainImage").src = targetElement.getAttribute("src"); 
    } 
} 

</script> 

HTML

<img height="250" width="500" style="border:3px solid grey" src="images/g1.jpg" id="mainImage"></img/> 
<br /> 

<div id="imgstyle" onclick="changeImage(event)"> 
    <image class="imgstyle" src="images/g1.jpg" /> 
    <image class="imgstyle" src="images/g2.jpg" /> 
    <image class="imgstyle" src="images/g3.jpg" /> 
    <image class="imgstyle" src="images/g4.jpg" /> 
    <image class="imgstyle" src="images/g5.jpg" /> 
</div> 
<br /> 


<img height="250" width="500" style="border:3px solid grey" src="images/g1.jpg" id="mainImage"></img/> 
<br /> 

<div id="imgstyle" onclick="changeImage(event)"> 
    <image class="imgstyle" src="images/g1.jpg" /> 
    <image class="imgstyle" src="images/g2.jpg" /> 
    <image class="imgstyle" src="images/g3.jpg" /> 
    <image class="imgstyle" src="images/g4.jpg" /> 
    <image class="imgstyle" src="images/g5.jpg" /> 
</div> 

    <br><br> 

あなたはIDによって要素を取得している場合は、CSS

* { 
    box-sizing: border-box; 
} 
.imgstyle { 
    display: block; 
    float: left; 
    width: 100px; 
} 

.imgstyle + .imgstyle { 
    border-left: 1px solid; 
} 

Answer 1

、これが返されます第一試合 のdocument.getElementById（ "mainImage"）;それは第一1のために働いている理由だけ 代わり

<div id="imgstyle" onclick="changeImage(event, 0)"> 
<div id="imgstyle" onclick="changeImage(event, 1)"> //for second one 

のJsは

function changeImage(event, a) { 
    event = event || window.event; 
    var targetElement = event.target || event.srcelement; 
    if (targetElement.tagName == "IMG") { 
    document.getElementsByClassName("mainImage")[a].src = targetElement.getAttribute("src"); 
    } 
    } 

また、私はコードを試してみました

<img height="250" width="500" style="border:3px solid grey" src="images/g1.jpg" class="mainImage"></img/>