使用Javascript的简单图像库不改变大图像的来源_Javascript_Html_Image_Image Gallery

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

javascript html image

使用Javascript的简单图像库不改变大图像的来源,javascript,html,image,image-gallery,Javascript,Html,Image,Image Gallery,我正在尝试做一个简单的图像库测试。我希望有四个缩略图图像。当其中任何一个被单击时，它会将大图像的图像源更改为正确的对应图像，但我在尝试实现这一点时遇到了问题以下是我到目前为止的情况： HTML <body> <section id="gallery"> <div id="sidebar"> <a id="image1" href=""><img src="images/blue_small.j

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

以下是我到目前为止的情况：

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>

谢谢你的帮助。

一切似乎都井然有序。但您确实需要侦听onclick事件并启动imageSelect（）函数。

您得到了什么结果？我们没有太多可以合作的东西。代码看起来不错，除了我会在“if”条件之前添加另一个左大括号，并在最后一个右大括号之前添加它的右大括号。这将“if”功能与图像加载隔离开来。另外，是什么驱动/调用了“imageSelect（）”函数？

我刚才注意到你的图片并没有被隐式地命名。将它们的名称添加到这些函数调用中，它应该可以工作。

Javascript:

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

Html:

如果您需要更健壮的解决方案，这里有一个主题的变体，它会增加一点复杂性

两个关键点：

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

有了这些非常基本的特性，您可以支持任意数量的不同需求（并且不需要jquery）

脚本与对象上的单击事件之间没有任何关联。。您应该在小图像上添加事件侦听器；谢谢你的帮助，我只需要确保图像名称与我的匹配，因为你输入了一些不同的名称。是的，我在我的计算机上很快地进行了相似处理，并更改了一些，以便于我使用。祝你好运！

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

<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>

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