使用 Javascript 的简单图片库不会改变大图片的来源

Question

I am trying to make a simple image gallery test.我正在尝试进行一个简单的图片库测试。 I want there to be four thumbnail images.我想要四个缩略图。 When any of them is clicked, it will change the image source of the big image to the correct corresponding image, but I am having problems trying to achieve this.单击其中任何一个时，它会将大图像的图像源更改为正确的相应图像，但我在尝试实现此目标时遇到了问题。

Here is what i have so far:这是我到目前为止所拥有的：

HTML HTML

<body>
    <section id="gallery">
        <div id="sidebar">
            <a id="image1" href=""><img src="images/blue_small.jpg"></a>
            <a id="image2" href=""><img src="images/red_small.jpg"></a>
            <a id="image3" href=""><img src="images/green_small.jpg"></a>
            <a id="image4" href=""><img src="images/orange_small.jpg"></a>
        </div>
        <div id="enlarged">
            <img id="bigImage" src="images/blue_large.jpg" >
        </div>
    </section>
    <script src="test.js"></script>
</body>

JavaScript JavaScript

function imageSelect () {
    var image1 = document.getElementById("image1");
    var image2 = document.getElementById("image2");
    var image3 = document.getElementById("image3");
    var image4 = document.getElementById("image4");
    var bigImage = document.getElementById("bigImage");

    if (image1.clicked == true) {
        bigImage.src = "images/blue_large.jpg";
    } else if (image2.clicked == true) {
        bigImage.src = "images/red_large.jpg";
    } else if (image3.clicked == true) {
        bigImage.src = "images/green_large.jpg";
    } else if (image2.clicked == true) {
        bigImage.src = "images/orange_large.jpg";
    }
};

imageSelect();

Thanks for any help.谢谢你的帮助。

Answer 1

Javascript: Javascript：

function imageSelect(imageSrc) {
var newImage = imageSrc;
document.getElementById("bigImage").src = newImage;
return false;
};

Html:网址：

<section id="gallery">
        <div id="sidebar">
            <a id="image1" href="#" onclick="imageSelect('blue_big.png');"><img src="blue_small.png"></a>
            <a id="image2" href="#" onclick="imageSelect('red_big.png');"><img src="red_small.png"></a>
            <a id="image3" href="#" onclick="imageSelect('green_big.png');"><img src="green_small.png"></a>
            <a id="image4" href="#" onclick="imageSelect('orange_big.png');"><img src="orange_small.png"></a>
        </div>
        <div id="enlarged">
            <img id="bigImage" src="te5.png" >
        </div>
    </section>

Answer 2

Everything seems in order.一切似乎都井井有条。 But you do need to listen for onclick event and fire your imageSelect() function then.但是您确实需要监听 onclick 事件并触发您的 imageSelect() 函数。

Answer 3

What results are you getting?你得到什么结果？ We do not have much to work with.我们没有太多工作要做。 The code looks good except I would add another left brace before the 'if' condition and its closing brace before your final closing brace.代码看起来不错，只是我会在“if”条件之前添加另一个左大括号，并在最后一个右大括号之前添加它的右大括号。 This isolates the 'if' function from the image loading.这将“if”函数与图像加载隔离开来。 Also, what is driving/calling the 'imageSelect()' function?另外，什么是驱动/调用“imageSelect()”函数？

I just now noticed that your images are not being called by their implicit name.我刚刚注意到你的图像没有被它们的隐含名称调用。 Add their names to those function calls and it should work.将它们的名称添加到这些函数调用中，它应该可以工作。

Answer 4

Here is a variation on the theme that adds a bit of complexity if you needed a more robust solution.如果您需要更强大的解决方案，这里有一个主题的变体，它会增加一些复杂性。

<section id="gallery">
  <div id="sidebar">
    <ul>
      <li>
        <img src="http://placehold.it/100x100" class="small" data-key="aaa" />
      </li>
      <li>
        <img src="http://placehold.it/100x100" class="small" data-key="bbb" />
      </li>
      <li>
        <img src="http://placehold.it/100x100" class="small" data-key="ccc" />
      </li>
      <li>
        <img id="four" src="http://placehold.it/100x100" class="small" data-key="ddd"/>
      </li>
    </ul>
  </div>
  <div id="enlarged">
    <img id="big" src="http://lorempixel.com/h/600/410/" >
  </div>
</section>

-- ——

var big = document.getElementById("big");
var imgsrc = {
  'aaa' : 'http://lorempixel.com/d/600/410/',
  'bbb' : 'http://lorempixel.com/e/600/410/',
  'ccc' : 'http://lorempixel.com/f/600/410/',
  'ddd' : 'http://lorempixel.com/g/600/410/'
};

function imageSelect (target) {
  var img = new Image();
  img.src = imgsrc[target.dataset.key];
  img.onload = function(){
    big.src = img.src;
  }
};

document.body.addEventListener("click", function (event) {
  if (event.target.classList.contains("small")) {
    imageSelect(event.target);
  }
});

A couple key points :几个关键点：

use delegated events to minimize handler logic使用委托事件来最小化处理程序逻辑
access stored data from minimal markup attributes从最少的标记属性访问存储的数据
provide for some kind of transition with a load handler使用负载处理程序提供某种转换

With these very basic features, you could support any number of different requirements (and without jquery).使用这些非常基本的功能，您可以支持任意数量的不同需求（无需 jquery）。

Fiddle小提琴

使用 Javascript 的简单图片库不会改变大图片的来源

问题描述

4 个解决方案

解决方案1
1 已采纳 2016-03-16 01:54:58

解决方案2
0 2016-03-16 01:45:14

解决方案3
0

解决方案4
0 2016-03-16 03:22:14

使用 Javascript 的简单图片库不会改变大图片的来源

问题描述

4 个解决方案

解决方案1 1 已采纳 2016-03-16 01:54:58

解决方案2 0 2016-03-16 01:45:14

解决方案3 0

解决方案4 0 2016-03-16 03:22:14

解决方案1
1 已采纳 2016-03-16 01:54:58

解决方案2
0 2016-03-16 01:45:14

解决方案3
0

解决方案4
0 2016-03-16 03:22:14