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

Javascript：

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>

Answer 2

一切似乎都井井有條。 但是您確實需要監聽 onclick 事件並觸發您的 imageSelect() 函數。

Answer 3

你得到什么結果？ 我們沒有太多工作要做。 代碼看起來不錯，只是我會在“if”條件之前添加另一個左大括號，並在最后一個右大括號之前添加它的右大括號。 這將“if”函數與圖像加載隔離開來。 另外，什么是驅動/調用“imageSelect()”函數？

我剛剛注意到你的圖像沒有被它們的隱含名稱調用。 將它們的名稱添加到這些函數調用中，它應該可以工作。

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

小提琴

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