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

Question

我正在尝试进行简单的图库测试。我想要有四个缩略图。当点击其中任何一个时，它会将大图的图像源更改为正确的对应图像，但我在尝试实现这一点时遇到了问题。

这是我目前的情况：

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

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();

感谢您的帮助。

Answer 1

一切似乎都井井有条。但是你确实需要监听 onclick 事件然后触发你的 imageSelect() 函数。

Answer 2

你得到了什么结果？我们没有太多工作要做。代码看起来不错，只是我会在 'if' 条件之前添加另一个左大括号，并在最后的右大括号之前添加它的右大括号。这将 'if' 函数与图像加载隔离开来。另外，driving/calling 'imageSelect()' 函数是什么？

我刚刚注意到您的图像没有被隐含的名称调用。将他们的名字添加到这些函数调用中，它应该可以工作。

Answer 3

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 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);
  }
});

几个关键点：

使用委托事件来最小化处理程序逻辑
从最少的标记属性访问存储的数据
使用负载处理程序提供某种类型的转换

有了这些非常基本的功能，您就可以支持任意数量的不同需求（没有 jquery）。

Fiddle

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

Simple Image Gallery using Javascript not changing the source of the big image

html

javascript

image

image-gallery