使用image onclick和div容器的javascript照片库

我正在尝试创建一个简单的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>";
        }

函数库（）
{
var img1=document.getElementById（“显示”）
.innerHTML=“”；
var img2=document.getElementById（“显示”）
.innerHTML=“”；
var img3=document.getElementById（“显示”）
.innerHTML=“”；
var img4=document.getElementById（“显示”）
.innerHTML=“”；
var img5=document.getElementById（“显示”）
.innerHTML=“”；
}

---

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

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

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

 gallery(1);

然后使用get you函数显示图像1：

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

---

关于你的代码，我可以说很多关于内联javascript等的事情。但是你可以用谷歌搜索，有很多网站可以解释这一点。

把你自己放在程序的位置上：你把id为“display”的元素放在第一张照片中，然后放在第二张照片中，直到第五张

---

点击哪张照片无关紧要。你总是这么做，在结果中拍第五张照片。

我想这可能会对你有所帮助

现场演示 HTML

JQuery

 $(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>");
     });

 });

$（文档）.ready（函数（）{
$（“#imgs1”）。单击（函数（）{
$（“#显示”）.html（“”）；
});
$（“#imgs2”）。单击（函数（）{
$（“#显示”）.html（“”）；
});
});

现场演示

---

如果这是您需要的，请写一封回复我..

，那么我该如何解决？

 $(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>");
     });

 });