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

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

一切似乎都井井有条。但是你确实需要监听onclick事件并激活你的imageSelect（）函数。

Answer 3

你得到了什么结果？我们没有多少工作要做。代码看起来不错，除非我在＆＃39;之前添加另一个左括号。条件及其最后一个闭合支撑前的闭合支撑。这隔离了“如果＆＃39;从图像加载功能。此外，什么是驾驶/调用＆＃39; imageSelect（）＆＃39;功能？

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

Answer 4

如果您需要更强大的解决方案，这是主题的变体，会增加一些复杂性。

<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不改变大图像的来源

4 个答案: