Javascript-点击或滚动时交换图像

Javascript - swap image on click or rollover

本文关键字：交换 图像 滚动 Javascript-      更新时间：2024-05-28

我知道如何在jquery中做到这一点，但我正在尝试用纯粹的老式javascript来完成以下操作。有人能帮忙吗：

$(".thumbnail").click(function() {
    $("#mainImage").attr("src", $(this).attr("src"));
});

我的最终目标是点击缩略图并更改主图像，但我需要使用javascript（无jquery）。我知道这听起来很简单，但我想不通。非常感谢。

jQuery自动提供的东西太多了，很难给你一个能完成jQuery代码所做一切的答案。这里有一个简单的例子，它将查找每个类为thumbnail的图像，并将其onclick属性设置为执行图像交换的事件处理程序。

onload = function () {
    var bigImg = document.getElementById("mainImage");
    for (var i = 0; i < document.images.length; i++) {
        var img = document.images[i];
        if (/'bthumbnail'b/.test(img.className) {
            img.onclick = thumbnailHandler;
        }
    }
    function thumbnailHandler(e) {
        bigImg.src = this.src;
    }
};

如果您不必支持IE7，您可以使用document.querySelectorAll():来稍微简化它

onload = function () {
    var bigImg = document.getElementById("mainImage");
    var thumbs = document.querySelectorAll(".thumbnail");
    for (var i = 0; i < thumbs.length; i++) {
        thumbs[i].onclick = thumbnailHandler;
    }
    function thumbnailHandler(e) {
        bigImg.src = this.src;
    }
};

顺便说一句，我不明白为什么要将主图像的来源设置为缩略图的来源。你正在将完整的图像加载到缩略图中吗？这可以下载大量内容，并且可以快速增加页面的内存占用。

事件委派可能是最简单的方法：

function expandThumbnail(e) {
    if(~(' ' + e.target.className + ' ').indexOf(' thumbnail ')) {
        document.getElementById('mainImage').src = e.target.src;
    }
}
if(document.addEventListener) {
    document.addEventListener('click', expandThumbnail, false);
} else {
    document.attachEvent('onclick', function() {
        expandThumbnail({
            target: event.srcElement
        });
    });
}

如果我理解正确的话，你会显示一个相关图像的缩略图，比如说"1thumb.png"，比如说‘1.png’，当你点击这个缩略图时，你想更改主图像的src属性，比如说id＝‘mainimg’，以显示与缩略图相关的"1.png"图像，而不是它显示的任何图像。我试过这个，它有效：

在您的<header>:内部

<script type='text/javascript'>
function myHandler(source){
    document.getElementById('mainimg').src=source;
}
</script>
...

您的缩略图代码：

<img src='1thumb.png' onclick="myHandler('1.png')"/>

或者，对于翻转触发：

<img src='1thumb.png' onmouseover="myHandler('1.png')"/>

看看：http://jsfiddle.net/d7Q27/7/

相关文章：