Question

我已经创建了一个Javascript函数，它允许我在直接点击div时将图像更改为另一个，但我试图让这个函数工作，这取决于我选择的其他图像图标。

正如你从上面的图片中看到的，我有一个主要的div包含浏览器加载的图片，还有两个包含不同图片的缩略图div，我想创建一个函数来更改主div，如果其中一个选择较小的缩略图div。

当前的Javascript功能

 function diffImage(img) {
     if(img.src.match(/blank/)) img.src = "bognor.jpg";
     else img.src = "images/bognor2.jpg";
 }

提前致谢，山姆

Answer 1

您只需在图标上使用onclick事件侦听器，该功能会将大图像更改为所点击项目的图像：

document.getElementById("icon1").onclick = function() {
    document.getElementById("mainImage").src = this.src;
}

document.getElementById("icon2").onclick = function() {
    document.getElementById("mainImage").src = this.src;
}

如果您碰巧有几个图标，可以创建icon类并应用事件监听器，如下所示：

var icons = document.getElementsByClassName("icon");

for(var i=0; i<icons.length; i++) {
    icons[i].onclick = function(){
        document.getElementById("main").src = this.src;
    }
}

Fiddle Example for using classes

虽然在这种情况下使用jQuery并简单地附加执行$('.icon').click(function(){ ... })的事件处理程序更容易。当然，你不需要这样做。

Answer 2

您可以将大图片的网址放在拇指元素上的自定义data-attribute中，例如<img src="thumb1.png" data-bigsrc="image1.png" />。然后，您可以向所有缩略图添加事件，如下所示：

var thumbs = document.querySelectorAll('.thumbnail');
var mainImage = document.querySelector('#mainImage');


for(var i=0; i<thumbs.length; ++i) {
  thumbs[i].addEventListener('click', function(e) {
      mainImage.src = e.target.getAttribute("data-bigsrc");
  });
}

如果您拥有高质量的图片并且实际上想要在用户点击时加载它们，您还可以为每个图像使用单选按钮，并将value设置为大图像的URL。使单选按钮不可见，并将缩略图放在标签内。然后，您可以将事件侦听器绑定到所有单选按钮，并根据radiobutton值更改主图像URL。

或者，如果你想要提前加载所有图像，你应该制作大量的大小图像对，并且只有点击小图像的单选按钮才能使大图像可见，从而制作全css解决方案。

Answer 3

我最近做了类似的事情，我在一张较小的thumnail图像的特征图像下面有一张桌子。

$(".browseTable").on('click', 'td', function () {
    var thumbNail = $(this).parent('tr').find('img').attr('src');
    var feature = $('#featureImg img').attr('src');
    $('#featureImg img').fadeOut(400, function () {
        $(this).fadeIn(400)[0].src = thumbNail;
    });
});

Answer 4

作为替代方案，它使用了vanilla JavaScript，并且涵盖了存储/命名图像文件的三种不同方式。

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
    <div id="divMainImage">
        <img id="mainImage" src="/images/image01Main.jpg" alt="Main image" />
    </div>
    <div id="divThumbnails">
        <img class="thumb" src="/images/image01.jpg" alt="image01 thumbnail" />
        <img class="thumb" src="/images/image02.jpg" alt="image02 thumbnail" />
        <img class="thumb" src="/images/image03.jpg" alt="image03 thumbnail" />
    </div>
    <script type="text/javascript">
        // Name both small and large images the same but with a prefix or suffix depicting thumbnail/main:
        // image01.jpg (image01small.jpg) or image01Main.jpg (image01.jpg)
        // image02.jpg (image02small.jpg) or image02Main.jpg (image02.jpg) etc.
        // Or use two folders - one with main images, the other with thumbnails - both files named the same,
        // then swap the folder to use when getting the image.

        // Then use the displayed thumbnails' class to load originals:
        var thumbnails = document.getElementsByClassName("thumb");
        var mainImage = document.getElementById("mainImage");

        for (index in thumbnails)
        {
            thumbnails[index].onclick = function () {
                // Depending on the way used use on of the following:
                mainImage.src = this.src.replace('.jpg', 'Main.jpg');
                // Or
                // mainImage.src = this.src.replace('thumb.jpg', '.jpg');
                // Or
                // mainImage.src = this.src.replace('/images/small/', '/images/large/');
            }
        }
    </script>
</body>
</html>

在图像图标单击上更改div内的图像

4 个答案: