JavaScript 照片库使用图像点击和 div 容器

Question

我正在尝试创建一个简单的javascript照片库。首先，我使用了我想在HTML中使用的图像的缩略图。HTML 看起来像这样

            <div id="imgs">
               <img onClick="gallery()" src="images/photo25thumbnail.jpg">
               <img onClick="gallery()" src="images/photo43thumbnail.jpg">
               <img onClick="gallery()" src="images/photo46thumbnail.jpg">
               <img onClick="gallery()" src="images/photo47thumbnail.jpg">
               <img onClick="gallery()" src="images/photo61thumbnail.jpg">
             </div>
       <div id="display">
        <div>
       </body>
        </html>   

因此，当用户单击图像时，它会被支持以触发函数库。这是我的JavaScript代码

                function gallery()
 {
var img1 = document.getElementById("display")
.innerHTML="<a href='#'><img src='images/photo25.jpg'></a>";
var img2 = document.getElementById("display")
.innerHTML ="<a href='#'><img src='images/photo43.jpg'></a>";
var img3 = document.getElementById("display")
.innerHTML="<a href='#'><img src='images/photo46.jpg'></a>";
var img4 = document.getElementById("display")
.innerHTML="<a href='#'><img src='images/photo47.jpg'></a>";
var img5 = document.getElementById("display")
.innerHTML="<a href='#'><img src='images/photo61.jpg'></a>";
        }

但是由于某种原因，当我单击其中一个图像时，它只显示div容器中的最后一个图像。我显然做错了什么，但我觉得我走在正确的轨道上。请帮忙。

Answer 1

你的函数中发生的最后一件事是什么？

您需要传递所需的图像参数，例如

 gallery(1);

然后让你函数显示图像 1：

function gallery(img_num){
  //show image number img_num
}

关于

你的代码，我还有很多关于内联JavaScript等的事情，但你可以谷歌一下，有很多网站可以解释这一点。

Answer 2

把自己放在程序的位置上：你拿起id为"display"的元素，把第一张照片放进去，然后放第二张照片，依此类推，直到第5张照片。

点击了哪张照片并不重要。您总是做同样的事情，并在结果中拍摄第 5 张照片。

Answer 3

我认为这可能会对您有所帮助

现场演示点击这里.HTML

    <div id="imgs">
     <img  id="imgs1" alt="adf" src="http://i2.wp.com/img.timeinc.net/time/daily/2013/1311 /232_int_afghanistan_1109.jpg?resize=200%2C133">
      <img id="imgs2" src="http://i0.wp.com/img.timeinc.net/time/daily/2013/1311/232_ent_thor_1110.jpg?resize=200%2C133">
      </div>
   <div id="display">
   <div>

杰奎里

 $(document).ready(function () {
     $("#imgs1").click(function() {
$("#display").html("<a href='#'><img src='http://timeglobalspin.files.wordpress.com/2013/11/de7f94520e744ada949e8f0759daf783-0.jpg?w=1393'></a>");
     });

     $("#imgs2").click(function() {
$("#display").html("<a href='#'><img src='http://cinepop.com.br/wp-content/uploads/2013/10/Thor-O-Mundo-Sombrio-4-650x400.jpg'></a>");
     });
 });

如需现场演示，请单击此处

如果这是你需要的，请回复我..