Question

我刚刚完成了一个关于如何开发一个Javascript库的教程，该库改变了主要图像＆＃39;单击其中一个较小的缩略图时单击。

我遇到的问题是我需要＆＃39; mainImage＆＃39;根据正在呈现的缩略图链接到其各自的页面。

到目前为止，这是我的代码：

<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中添加链接？.html到它：

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

只需编辑上面的行即可更改页面。

JSFiddle Demo

编辑：
在回复您的评论时，请将html更改为：

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

并将JavaScript行更改为：

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

Javascript画廊 - 主图像href更改

1 个答案:

JSFiddle Demo