使用缩略图使用 OnClick 更改主图像答案

【问题标题】：using thumbnails to change main image using OnClick使用缩略图使用 OnClick 更改主图像
【发布时间】：2014-06-01 20:06:28
【问题描述】：

所以我有几个缩略图和它们左侧的大图像，当您单击其中一个缩略图时，我希望它将主图像更改为单击缩略图的主图像，我正在考虑使用类似的东西：

<script type="text/javascript">
   function changeImage(){
    document.getElementById('image').src='';
   }
</script>

然后在主图上：

<img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image"/>

最后是缩略图：

<img src="<?php echo $image['thumb']; ?>" onclick="changeImage()" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" />

显然，我需要在 .src='' 中添加一些内容，但我不确定是什么，我可以在其中添加一些内容，而不是例如 1.jpg 来选择被点击的图像吗？

【问题讨论】：

这很容易通过谷歌找到，并且已经在这里问了很多。
也许我没有使用正确的词，但我找不到我需要的确切代码，到目前为止我的编码似乎很好，我只是不确定src 使用什么，因为我需要它是点击过的图像。
在 Google 上搜索 javascript“this”，因为“this”将是您在代码中单击的任何 src 缩略图。此外，您可以通过 javascript 谷歌更改图像 src。
问题是，如果我这样做，我将获得全新的代码，这意味着替换我已经完成的代码，而且我只是 JS 的初学者，要取出我的内容需要做很多工作必须输入新代码，我只是希望有人能说，是的，该代码可以工作，您可以添加类似This 的内容，这将使src 无论单击哪个图像。我并不是要偷懒，但我仍在学习，如果可以的话，我今天会努力解决这个问题。
stackoverflow.com/questions/15079775/…

【解决方案1】：

您可以将图像的引用作为参数传递。

function changeImage(x){
  document.getElementById('image').src = x.src;
}

您可以继续使用第一种方式调用该函数：

<img src="<?php echo $image['thumb']; ?>" onclick="changeImage(this)" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" />

【讨论】：

有什么我可以添加的，以便主图像保持其原始大小而不是缩略图的大小？
来吧，你可以用谷歌搜索这个。基本的 HTML 问题。 w3schools.com/html/html_images.asp 查看标题 HTML 图像 - 设置图像的高度和宽度...只需将其设置为适合文档的位置即可
我知道如何设置图像的高度和宽度，问题是，当我使用您给我的代码时，它会更改主图像，但它也会将其大小更改为缩略图的大小，我想保持它的原始大小，这可能并不总是相同，具体取决于查看它的设备，所以我不能只将宽度和高度设置为固定大小，即 500 像素，我需要它在更改图像时保持原始大小.
如果你看这里：nthwondr.com/index.php?route=product/… 点击缩略图就可以看到问题了。

【解决方案2】：

TRY THIS DEMO

<script>
    function updateIMG(e) {
        document.getElementById("preview").src = e;
    }
</script>

【讨论】：