在 JavaScript 中的 ClickEvent 上选择图像

我会建议以下内容，尽管它可能缺少您的一些细节，因为我使用 CSS 来设置较小图像 （ .thumbs ） 和主图像 （ #main 的样式）：

function show(el) {
    if (!el) {
        // function requires a reference to the clicked element, here 'el'
        return false;
    }
    else {
        // finds the element with id="main"
        var showIn = document.getElementById('main'),
            // sets the sISrc variable with the src of the showIn element
            sISrc = showIn.src,
            // sets the variable 'elSrc' with the src value of the clicked element
            elSrc = el.src;
        // re-sets the src of the 'main' element with the src of the clicked element
        showIn.src = elSrc;
        // sets the clicked element's src to the (previous) value of the 'main' element
        el.src = sISrc;
    }
}
// finds all the images
var images = document.getElementsByTagName('img');
for (var i = 0, len = images.length; i < len; i++) {
    // iterates through all the images and assigns an 'onclick' event-handler
    images[i].onclick = function() {
        // passes the current image into the show() function when clicked
        show(this);
    };
}​

JS小提琴演示。

编辑了上面的代码，修改了以允许多个实例...图库的事情，这个版本只会影响.main元素（因为有多个具有相同标识符的元素我已经切换到class名称，尽管在当前版本中，这要求图像位于同一（即时）父（el.parentNode）：

function show(el) {
    if (!el) {
        return false;
    }
    else {
        var showIn = el.parentNode.getElementsByClassName('main')[0],
            sISrc = showIn.src,
            elSrc = el.src;
        showIn.src = elSrc;
        el.src = sISrc;
    }
}
var images = document.getElementsByTagName('img');
for (var i = 0, len = images.length; i < len; i++) {
    images[i].onclick = function() {
        show(this);
    };
}​

JS小提琴演示。

引用：

• document.getElementById() .
• document.getElementsByTagName() .

function openimage(mainimageurl)
{
        document.getElementById('Idofthebimage').src =mainimageurl;
        //set the width height once in css  
 }

现在说在每个图像上写这个onclick="openimage(this.src)"或者更大的图像URL是否不同onclick="openimage('theurlofthebiggerimage')"

我整理了以下演示，展示了如何拥有一系列图像元素并将它们与组顶部的主要元素交换。

我还包含了window.onload事件处理程序，因为在解析元素并将其添加到 DOM 之前，您无法附加元素事件处理程序，这（在大多数情况下）有助于防止 Javascript 中发生的错误。

这不是处理与在页面加载之前或期间运行脚本相关的问题的唯一方法（例如，脚本调用以内联方式运行并访问在window.onload触发之前已解析的元素）。但对于更小、更程序化的脚本来说，这是一种常见的、大多是持久的解决方案。

<div id="imgs">
    <div>
        <img id="mainimg" src="http://goo.gl/UohAz"/>
    </div>
    <img src="http://www.gravatar.com/avatar/f893555be713a24dee52230712cdde3a?s=128&d=identicon&r=PG"/>
    <img src="http://www.gravatar.com/avatar/495d675e3bc42ed1dee469e2ce701f1b?s=128&d=identicon&r=PG"/>
    <img src="http://www.gravatar.com/avatar/db5a61382c2ba7309071c323edb4013b?s=128&d=identicon&r=PG"/>
</div>
window.onload = function() {
    var imgs = document.getElementById('imgs').getElementsByTagName('img'),
        mainimg = document.getElementById('mainimg'),
        i = imgs.length,
        lastimg;
    var swap = function() {
        var old = mainimg.src;
        mainimg.src = this.src;
        this.src = old;
    };
    while (i--) {
        img = imgs[i];
        img.id = 'img-' + i;
        if (img.parentNode.id == 'main-img') {
            lastimg = img.id;
        }
        img.onclick = swap;
    }
};

http://jsfiddle.net/userdude/yq9Fq/