2

我想做的是让访问者通过单击一组缩略图来更改图像。但是，我遇到的问题是我真的不想将图像位置硬编码到脚本中。我希望脚本具有足够的便携性，可以在任何旧页面和图像集上运行，只要使用的 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>
4

3 回答 3

0

我会将元素加载到一个数组中，在 inlin html 之外为每个元素添加一个事件，等等等等……但是你去：

将“this”添加到您的 onclick 事件中，将标签传递给 clickSwitch。从那里你可以得到你需要的大屏幕。

html

<a href="#n" onclick="clickSwitch(this);"><img src="/img/projects/jamison/j1.jpg" alt="Jamison: View One" /></a>

javascript

function clickSwitch(el){
    var src = el.firstChild.getAttribute('src');
    var bigscreen = document.getElementById("bigscreen"); 
    bigscreen.setAttribute("src", src);
}
于 2009-10-05T22:11:42.063 回答
0

对于一个优雅的降级解决方案，我建议将大图像的图像源作为锚的超参考，因此如果不存在 javascript，用户将被重定向到适当的全尺寸图像（例如jQuery）：

<a class="thumbLinks" href="/img/projects/jamison/j1-BIG.jpg"><img src="/img/projects/jamison/j1-SMALL.jpg" alt="Jamison: View One" /></a>

$(document).ready(function() {
    $('a.thumbLinks').click(function() {
        //set the source of the big screen to the href of the clicked anchor
        //throw in some animation too
        $('#bigscreen').fadeOut("fast").
                       .attr('src', $(this).attr('href'))
                       .fadeIn();

        //prevent link from being followed if Javascript is present
        return false; 
    }
});

这种方法的优点：

  • 单击拇指将在任何浏览器上做一些有用的事情，因为它们仍在某个地方。
  • Javascript 代码与标记完全分离。
于 2009-10-05T22:37:59.500 回答
-1

给缩略图一个 ID 并在函数参数中发送它......

function clickSwitch(thumbClicked) {

var imgSrc = document.getElementById(thumbClicked).src;
var element = document.getElementById("bigscreen");
element.setAttribute("src", imgSrc);
}

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(thumb1);"><img src="/img/projects/jamison/j1.jpg" alt="Jamison: View One" id = "thumb1" /></a></li>
    <li><a href="#n" onclick="clickSwitch(thumb2);"><img src="/img/projects/jamison/j2.jpg" alt="Jamison: View Two"  id = "thumb2"/></a></li>
</ul>
于 2009-10-05T22:20:00.210 回答