JavaScript庫-主圖像href更改

Question

我剛剛看過有關如何開發Javascript畫廊的教程，當單擊較小的縮略圖之一時，該畫廊會在單擊時更改“ mainImage”。

我遇到的問題是，我需要根據顯示的縮略圖將“ mainImage”鏈接到其自己的單獨頁面。

到目前為止，這是我的代碼：

<div id="slideshow">
<img class="mainimage" src="Koala.jpg" id="mainimage"/>
</br>
<div id="thumbnailhold" onclick="changeImage(event)">
<img class="imgStyle" src="Chrysanthemum.jpg"/>
<img class="imgStyle" src="Desert.jpg"/>
<img class="imgStyle" src="Hydrangeas.jpg"/>
<img class="imgStyle" src="Jellyfish.jpg"/>
<img class="imgStyle" src="Koala.jpg" />
</div>
</div>

<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>

Answer 1

您可以這樣做：

function changeImage(event){
event = event || window.event;
var targetElement = event.target || event.srcElement;
if (targetElement.tagName == "IMG"){
document.getElementById("mainimage").src = targetElement.getAttribute("src");
document.getElementById("mainimagelink").href= 'link'+targetElement.getAttribute("data-link")+'.html';
}

}

您將必須像這樣更改HTML：

<div id="slideshow">
<a id="mainimagelink" href="link1.html">
<img class="mainimage" src="Koala.jpg" id="mainimage"/>
</a>
</br>
<div id="thumbnailhold" onclick="changeImage(event)">
<img class="imgStyle" src="Chrysanthemum.jpg" data-link="1"/>
<img class="imgStyle" src="Desert.jpg" data-link="2"/>
<img class="imgStyle" src="Hydrangeas.jpg" data-link="3"/>
<img class="imgStyle" src="Jellyfish.jpg" data-link="4"/>
<img class="imgStyle" src="Koala.jpg" data-link="5"/>
</div>
</div>

我所做的就是在圖像中添加<a>並添加data-link屬性，然后將您要鏈接的頁面放入其中。
當前，它只是使用數字，然后在javascript中添加link？.html到它：

document.getElementById("mainimagelink").href= 'link'+targetElement.getAttribute("data-link")+'.html';

只需編輯以上行即可更改頁面。

JSFiddle演示

編輯：
為了回應您的評論，請將html更改為此：

<img class="imgStyle" src="Chrysanthemum.jpg" data-link="Chrysanthemum"/>

並將JavaScript行更改為：

document.getElementById("mainimagelink").href= targetElement.getAttribute("data-link")+'.html';