0

我正在尝试创建一个简单的 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 容器中的最后一个图像。我显然做错了什么，但我觉得我在正确的轨道上。请帮忙。

4

3 回答 3

0

我想这可能对你有帮助

现场演示点击这里 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>

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

 });

现场演示点击这里

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

于 2013-11-14T12:50:44.127 回答
0

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

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

 gallery(1);

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

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

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

于 2013-11-14T11:08:11.587 回答
0

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

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

于 2013-11-14T11:08:42.950 回答