在javascript中显示缩略图中的大图片_Javascript_Html

在javascript中显示缩略图中的大图片

javascript html

在javascript中显示缩略图中的大图片,javascript,html,Javascript,Html,我左边有4个缩略图，当我点击其中一个时，我会在屏幕的右边显示一个大图片我的问题是，出于某种原因，它显示了8个小缩略图（先是4个，然后又是4个）。前四个是不可点击的。最后四个是可点击的，正确显示较大的图像那么，前四个缩略图是从哪里来的，我该如何去除它们呢我有一个透明的图片（Picture.gif），它是被改变的较大的图片，显示了缩略图的较大版本我的html： <body onLoad="init()"> <table class="planes">

我左边有4个缩略图，当我点击其中一个时，我会在屏幕的右边显示一个大图片

我的问题是，出于某种原因，它显示了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;
}

var images=新数组（'img/Plane1.jpg'、'img/Plane2.jpg'、'img/Plane3.jpg'、'img/Plane4.jpg'）；
var imgList=新数组（）；
函数init（）
{
对于（var i=0；i前4个图像是静态html代码中的图像。接下来4个是从javascrip生成的动态图像。只需从html代码中删除thumb内部的图像。
前4个图像是静态html代码中的图像。接下来4个是从javascrip生成的动态图像。只需删除thumb内部的图像即可umb从html代码中删除。
在这一行：
document.getElementById('thumb').appendChild(imgList[i]);

您正在再次将图像附加到“thumb”列表中。但这些是您要保留的图像，因为它们已附加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>





在这行中：
document.getElementById('thumb').appendChild(imgList[i]);

您正在再次将图像附加到“thumb”列表中。但这些是您要保留的图像，因为它们已附加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>





图像既在html中，也在javascript中创建
行document.getElementById（'thumb'）.appendChild（imgList[i]）；
将javascript的图像数组中指定的每个图像添加到页面中
我建议您删除html中的标记-只需删除
标记和其中的图像即可
去掉不需要的标记后，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>

图像既在html中，也在javascript中创建
行document.getElementById（'thumb'）.appendChild（imgList[i]）；
将javascript的图像数组中指定的每个图像添加到页面中
我建议您删除html中的标记-只需删除
标记和其中的图像即可
去掉不需要的标记后，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>

首先，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];
    };
}

var images=new数组（'img/Plane1.jpg'，'img/Plane2.jpg'，'img/Plane3.jpg'，'img/Plane4.jpg'），
缩略图=document.getElementById（'thumb'）.getElementsByTagName（'img'），
mainImage=document.getElementById（'main'）；
对于（i=0；i


首先，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];
    };
}

var images=new数组（'img/Plane1.jpg'，'img/Plane2.jpg'，'img/Plane3.jpg'，'img/Plane4.jpg'），
缩略图=document.getElementById（'thumb'）.getElementsByTagName（'img'），
mainImage=document.getElementById（'main'）；
对于（i=0；i


谢谢你的帮助！这正是问题所在。还有一个问题：当我没有列表时，我现在如何将四个缩略图相互对齐？（我使用css将图像垂直放置在彼此下方）。您可以使用idthumb
删除div
，并将该id放在ul
元素上。然后，使用document.createElement（'li'）创建li
元素
并将图像附加到它，然后将li
附加到ul
元素。感谢您的帮助！这正是问题所在。还有一个问题：当我没有列表时，如何将四个缩略图彼此对齐？（我有css将图像垂直放置在彼此下方）。您可以使用idthumb
删除div
，并将该id放在ul
元素上。然后，使用document.createElement（'li'）创建li
元素
并将图像附加到它，然后将li
附加到ul
元素。感谢您的帮助。但是，当我没有列表时，我现在如何将四个缩略图彼此对齐？（我有css将图像放在每个缩略图下。）