我想做的是让访问者通过单击一组缩略图来更改图像。但是,我遇到的问题是我真的不想将图像位置硬编码到脚本中。我希望脚本具有足够的便携性,可以在任何旧页面和图像集上运行,只要使用的 ID 匹配即可。有没有办法可以更改以下内容以将 X 的 src 替换为 A、B 或 C 的 src?
JS
function clickSwitch() {
var element = document.getElementById("bigscreen");
element.setAttribute("src", "/img/projects/jamison/j2.jpg");
}
HTML
<img class="project-img" src="/img/projects/jamison/j1.jpg" alt="Jamison: View One" id="bigscreen" />
<ul class="project-thumbnails">
<li><a href="#n" onclick="clickSwitch();"><img src="/img/projects/jamison/j1.jpg" alt="Jamison: View One" /></a></li>
<li><a href="#n" onclick="clickSwitch();"><img src="/img/projects/jamison/j2.jpg" alt="Jamison: View Two" /></a></li>
</ul>