在tumbnails中的javascript圖片庫

我想用JavaScript製作圖片縮略圖。但是當我點擊圖片時並沒有移動。我還想列出相同的右側如何做.please幫助我。 this is my page i want to make 在tumbnails中的javascript圖片庫

這是我的代碼

<div id="imgstyle" onclick="changeImage(event)"> 
    <image class="imgstyle" src="images/r1.jpg" /> 
    <image class="imgstyle" src="images/r2.jpg" /> 
    <image class="imgstyle" src="images/r3.jpg" /> 
    <image class="imgstyle" src="images/r4.jpg" /> 
    <image class="imgstyle" src="images/nw.jpg" /> 
</div> <br><br>

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>

來源

2017-09-27 minn

JavaScript的標識是區分大小寫的，必須大寫的字母錯誤的幾個實例。 – DarthJDG

您能否使用snippet或https://jsfiddle.net/ – core114

@ core114更新您的代碼而不是在jsfiddle中更新它更好地創建片段。 –

改變這一行從這樣的：

document.getelEmentbyid("mainImage").src = targetElement.getAttribute("src");

到

document.getElementById("mainImage").src = targetElement.getAttribute("src");

來源

2017-09-27 08:44:47

謝謝soo – minn

無後顧之憂 - 您可以將此標記爲未來用戶的答案嗎？謝謝 –

但有一個問題，我想使用相同的另一面和6邊這樣可以告訴如何得到它PLZ。 – minn

你的JS是極其草率的，它沒有工作，因爲屬性和方法名的外殼是完全錯誤的。

function changeImage(event) { 
 
    event = event || window.event; 
 
    
 
    var targetElement = event.target || event.srcelement; 
 

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

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

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

<img height="250" width="550" style="border:4px solid grey" src="https://placehold.it/550x250?text=A" id="mainImage" /> 
 
<br /> 
 
\t 
 
<div id="imgstyle" onclick="changeImage(event)"> 
 
    <image class="imgstyle" src="https://placehold.it/550x250?text=A" /> 
 
    <image class="imgstyle" src="https://placehold.it/550x250?text=B" /> 
 
    <image class="imgstyle" src="https://placehold.it/550x250?text=C" /> 
 
    <image class="imgstyle" src="https://placehold.it/550x250?text=D" /> 
 
    <image class="imgstyle" src="https://placehold.it/550x250?text=E" /> 
 
</div> \t 
 
<br><br>

來源

2017-09-27 08:53:44 Thijs

在tumbnails中的javascript圖片庫

回答

相關問題