图片库使用 php css 和 javascript答案

【问题标题】：Image Gallery Using php css and javascript图片库使用 php css 和 javascript
【发布时间】：2017-10-02 05:45:51
【问题描述】：

我正在尝试创建一个简单的图片库。我正在关注 youtube 上的教程。我很确定我很好地遵循了它。但是，我不确定为什么它不起作用。似乎是 javascript 导致了问题，因为我每次都保存并检查它。但是当我添加代码时，当您单击缩略图时，它将用大图像切换图像。这是我的代码

PHP

    <div id="gHolder">
        <div id="theBigImageHolder">
            <img src="http://2.media.dorkly.cvcdn.com/24/85/a2d9c425cf32934dbe8648be5a453042.jpg"
 id="BigImage">
        </div>
        <div id="thumbnailsHolder">
            <img src="http://2.media.dorkly.cvcdn.com/24/85/a2d9c425cf32934dbe8648be5a453042.jpg">
            <img src="https://i.kinja-img.com/gawker-media/image/upload/s--aTCcDbn_--/c_fill,fl_progressive,g_center,h_900,q_80,w_1600/1503194806639950221.png">
            <img src="https://i.imgur.com/i7VBIz3.jpg">
            <img src="https://i.ytimg.com/vi/FaFrYdoD6XY/maxresdefault.jpg">
            <img src="http://assets1.ignimgs.com/2017/06/07/13313349-10154255755436457-483416867-o-1496868408304_1280w.jpg">
        </div>
      </div>

CSS

#gHolder{
      width: 600px;
      height: 500px;
      margin: 0 auto;
      background-color: silver;
      padding: 10px;
    }
#theBigImageHolder{
      width: 600px;
      height: 400px;
      background-color: white;
    }
#thumbnailsHolder{
      width: 590px;
      height: 90px;
      background-color: white;
      margin: 2px auto;
      padding: 5px;
    }
#theBigImageHolder > img{
      width: 600px;
      height: 400px;
    }
#thumbnailsHolder > img{
      width: 90px;
      height: 90px;
      display: block;
      float: left;
      margin: 2px;
      transition: border-radius 0.3s linear 0s;
    }
#thumbnailsHolder > img:hover{
      border-radius: 100px;
      cursor: pointer;
    }

Javascript

 function imgFunc(){
          var bigImage = document.getElementById("bigImage");
          var thumbnailsHolder = document.getElementById("thumbnailsHolder");

 thumbnailsHolder.addEventListener("click",function(event){
            if (event.target.tagName == "IMG") {
              bigImage.src = event.tagName.src;
            }
          }, false);
      }
      window.addEventListener("load",imgFunc,false);

你们知道我在 javascript 中哪里编码不正确吗？十分感谢这是一个预览。 https://codepen.io/UmaruHime/pen/JryvyP

【问题讨论】：

那是 HTML 而不是 PHP
id="BigImage> 缺少报价。
@PHPglue 我想我只是错过了在这里输入的内容，我检查了我的代码，它是正确的//
@LawrenceCherone 我通常将我的 php 或 html 文件保存在 .php ext 中，我认为这不是问题
@UmaruHime 为什么我提到它是因为您将问题标记为 PHP。

标签： javascript html css

【解决方案1】：

Id 错误，应该是

document.getElementById("BigImage");

第二个错误

 if (event.target.tagName == "IMG") {
   bigImage.src = event.target.src; //instead of bigImage.src = event.tagName.src;
 }

Fiddle

【讨论】：