從javascript中的縮略圖顯示大圖片

我在左邊有4個縮略圖，當我點擊其中一個時，我要在屏幕上向右顯示一個大圖。從javascript中的縮略圖顯示大圖片

我的問題是，由於某種原因，它顯示了8個小縮略圖（前4個，然後再4）。前四個是不可點擊的。最後四個可點擊並正確顯示較大的圖像。

那麼，前四個縮略圖從哪裏來，我該如何擺脫它們？

我有一張透明圖片（Picture.gif），它是更改後的較大圖片並顯示較大版本的縮略圖。

我的HTML：

<body onLoad="init()"> 

     <table class="planes"> 

     <tr> 
     <td> 
     <ul>    
     <div id="thumb"> 
      <li><img src="img/Plane1.jpg" alt="Plane1"></li> 
      <li><img src="img/Plane2.jpg" alt="Plane2"></li> 
      <li><img src="img/Plane3.jpg" alt="Plane3"></li> 
      <li><img src="img/Plane4.jpg" alt="Plane4"></li> 
     </div> 
     </ul> 
     </td> 
     <td>      
     <img class="pic" id="main" src="img/Picture.gif" alt=""> 
     </td> 
     </tr> 
    </table>

我的javascript：

var images= new Array('img/Plane1.jpg', 'img/Plane2.jpg', 'img/Plane3.jpg', 'img/Plane4.jpg'); 
var imgList = new Array(); 

function init() 
{ 
    for (var i=0; i<images.length; i++) 
    { 
     imgList[i] = new Image(); 
     imgList[i].src = images[i]; 
     document.getElementById('thumb').appendChild(imgList[i]); 
     imgList[i].addEventListener("click", swap, false) 
    } 
} 


function swap(evtObj) 
{ 
    var imgfile = evtObj.target.getAttribute('src'); 
    var mainTag = document.getElementById('main'); 
    mainTag.src = imgfile; 
}

來源

2014-10-02 user2939293

第4個圖像是你在靜態html代碼有那些。接下來的4個是由javascrip生成的動態。只需從您的html代碼中刪除拇指內的圖像。

來源

2014-10-02 09:35:00 GramThanos

在這一行：

document.getElementById('thumb').appendChild(imgList[i]);

您的圖像再次追加到「拇指」名單。但是這些是你想要保留的，因爲他們附有eventListener。

您需要從您的html代碼中刪除標籤以獲得所需的結果。

<li><img src="img/Plane1.jpg" alt="Plane1"></li> 
<li><img src="img/Plane2.jpg" alt="Plane2"></li> 
<li><img src="img/Plane3.jpg" alt="Plane3"></li> 
<li><img src="img/Plane4.jpg" alt="Plane4"></li>

來源

2014-10-02 09:35:41 Matt

謝謝你你的幫助！這正是問題所在 – user2939293 2014-10-02 17:21:16

還有一個問題：現在當我沒有列表時，如何將這四個縮略圖對齊？（我有CSS把圖像垂直放在彼此之下）。 – user2939293 2014-10-02 17:42:10

你可以用'thumb'刪除'div'，並把這個id放在'ul'元素上。然後，使用'document.createElement（'li'）'創建一個'li'元素並將圖像追加到它，然後將'li'追加到'ul'元素。 – Matt 2014-10-03 07:43:11

這些圖像都在您的HTML，也創建在JavaScript。

行document.getElementById('thumb').appendChild(imgList[i]);將您javascript的圖像數組中指定的每個圖像添加到頁面中。

我建議您將要刪除您的html中的 - 只需刪除<li>標籤和其中的圖像。

取出不需要的標籤後，你的HTML應該是這個樣子：

<body onLoad="init()"> 

     <table class="planes"> 

     <tr> 
     <td>   
     <div id="thumb"> 
     </div> 
     </td> 
     <td>      
     <img class="pic" id="main" src="img/Picture.gif" alt=""> 
     </td> 
     </tr> 
    </table>

來源

2014-10-02 09:36:13 Hecksa

謝謝你的幫助。但是如果我沒有這個列表，我怎麼才能將這四個縮略圖對齊呢？（我有CSS把圖像垂直放在彼此之下）。 – user2939293 2014-10-02 17:41:53

你應該仍然可以使用CSS - 嘗試使用'＃thumb'和'#thumb img'規則，這些應該是有用的。如果您遇到任何特殊問題，請在此提出一個單獨的問題，以便其他人也可以從解決方案中學習。 – Hecksa 2014-10-03 06:16:35

首先，div不能成爲ul一個孩子，第二，你真的不應該使用表格佈局（除非製造電子郵件模板）。

如果你只是想改變主圖像的src在縮略圖的點擊，你可以用下面的JS：

var images = new Array('img/Plane1.jpg', 'img/Plane2.jpg', 'img/Plane3.jpg', 'img/Plane4.jpg'), 
    thumbnails = document.getElementById('thumb').getElementsByTagName('img'), 
    mainImage = document.getElementById('main'); 

for (i = 0; i < thumbnails.length; i++) { 
    setClickFunction(i); 
} 

function setClickFunction(currentIndex) { 
    thumbnails[currentIndex].onclick = function() { 
     mainImage.src = images[currentIndex]; 
    }; 
}

Example

Using links for your large images instead of an array

來源

2014-10-02 09:52:41 Pete

從javascript中的縮略圖顯示大圖片

回答

相關問題