Question

HTML：

<html>
  <head>
    <script>pushImages();</script>
    <title>Float Image Gallery</title>
  </head>
  <body>
    <button onclick="showAllGalleries();">Show gallery</button>
    <div class="gallery">
      <div class="gallery-close">
        <a href=#><img class="gallery-close-button" src="http://bit.do/closeicon" onclick="hideAllGalleries();" /></a>
      </div>

      <div class="gallery-content">
        <!-- Whenever need to add a image, add this code :
          <div class="gallery-image-cell">
            <img class="gallery-content-image" src="" alt="Please add image here" />
            <img class="gallery-content-image" src="" alt="Please add image here" />
            <img class="gallery-content-image" src="" alt="Please add image here" />
            <img class="gallery-content-image" src="" alt="Please add image here" />
          </div>
        -->
        <!--
        Information :
          When adding photo that is not 1:1, it will force shrink to 1:1.
        -->
        <div class="gallery-image-cell">
          <img class="gallery-content-image" src="" alt="Please add image here" />
          <img class="gallery-content-image" src="" alt="Please add image here" />
          <img class="gallery-content-image" src="" alt="Please add image here" />
          <img class="gallery-content-image" src="" alt="Please add image here" />
        </div>
        <div class="gallery-image-cell">
          <img class="gallery-content-image" src="" alt="Please add image here" />
          <img class="gallery-content-image" src="" alt="Please add image here" />
          <img class="gallery-content-image" src="" alt="Please add image here" />
          <img class="gallery-content-image" src="" alt="Please add image here" />
        </div>
      </div>

    </div>
   </body>
</html>

CSS：

<style>
.gallery {
  display:none;
  width:100%;
  height:100%;
  left:0;
  bottom:0;
  top:auto;
  right:auto;
  position:fixed;
  background-color:#cccccc;
  opacity:50%;
  overflow-y: scroll;
}

.gallery-close {
  width:auto;
  height:auto;
  margin-top:10px;
  margin-left:10px;
}

.gallery-close-button {
  width:30px;
  height:30px;
}

.gallery-content {
  width:100%;
  height:auto;
  text-align:center; 
}

.gallery-content-image {
  width:20%;
  height:100%;
  opacity:0.6;
  filter:alpha(opacity=60);
}

.gallery-content-image:hover {
  background-color:#ffffff;
  opacity:1.0;
  filter:alpha(opacity=100);
}

.gallery-image-cell {
  width: 100%;
  height: 0;
  padding-bottom: 20%;
  margin-left: auto;
  margin-right: auto;
}
</style>

Javascript：

<script tyep="text/javascript">
function showAllGalleries(){
  var adsArray = document.getElementsByClassName("gallery");
  for (var i = 0; i<adsArray.length; i++){
    adsArray[i].style.display='inline';
  }
}

function hideAllGalleries(){
  var adsArray = document.getElementsByClassName("gallery");
  for (var i = 0; i<adsArray.length; i++){
    adsArray[i].style.display='none';
  }
}

function pushImages(){
  var imageArray = document.getElementsByClassName("gallery-content-image")
  var imageLinkArray[];
  imageLinkArray.push("http://www.catchannel.com/images/feral-cats-birds.jpg");
  imageLinkArray.push("http://www.catchannel.com/images/orange-tabbies.jpg");
  imageLinkArray.push("http://thenypost.files.wordpress.com/2013/08/tiger132056-300x300.jpg");
  imageLinkArray.push("http://bioexpedition.com/wp-content/uploads/2012/06/Indochinese-Tiger-picture.jpg");
  imageLinkArray.push("http://www.east-northamptonshire.gov.uk/images/Dog_2.jpg");
  imageLinkArray.push("http://www.pet365.co.uk/product_images/r/008/dd_black_with_dog__41452_zoom.jpg");
  imageLinkArray.push("http://www.texasbirds.info/backyard/images/mountain_bluebird2_male.jpg");
  imageLinkArray.push("http://www.honolulumagazine.com/images/2013/Oct13/Print/Bird_Fairy.jpg");
  /*Use imageLinkArray.push("") to add a image; Add enough image.*/
  for (var i=0; i<imageArray.length; i++){
    imageArray[i].src = imageLinkArray[i];
  }
}
</script>

我不确定问题出在哪里，但点击按钮后没有发生任何事情请帮忙。任何帮助将不胜感激。谢谢。

Answer 1

<script>pushImages();</script>

这是在DOM加载之前调用函数，这会在控制台中引发错误。将其放在代码的底部或将其包装在window.onload = function() { .... }。

中

你在这一行中也错过了一个等号：var imageLinkArray[];（应该是var imageLinkArray = [];。

我还建议不要练习内联脚本。这样做是不好的做法。尝试向主体添加事件处理程序（onclick仅支持一个事件处理程序。）

document.getElementsByTagName("body")[0].addEventListener("load", showAllGalleries, false);

代码未使用array.push运行

1 个答案: