Javascript 显示何时加载我的页面的容器

当我加载页面时，我的容器：'.lightbox prev、.lightbox next'加载，但我只希望在单击'.lightbox触发器'时它们可见

我的HTML：

<div class="lightboxbg"></div>
<div class="lightbox-prev"></div>
<div class="lightbox-next"></div>
<div class="lightbox"></div>

我的JS：

<script type="text/javascript">
  var lightboxcounter;

  $(document).ready(function(){

      $('.lightbox-trigger').click(function() {
          lightboxcounter = $(this).attr('data-counter');
          var image = $(this).attr('data-img')
          $('.lightbox').css('background-image', 'url(' + image + ')');

          $('.lightboxbg, .lightbox, .lightbox-prev, .lightbox-next').fadeIn(800);
      });

      $('.lightboxbg').click(function() {
          $('.lightboxbg, .lightbox, .lightbox-prev, .lightbox-next').fadeOut(800);
      });

      $('.lightbox-prev').click(function() {
          lightboxcounter--;
          $('.lightbox-trigger[data-counter="'+lightboxcounter+'"]').click();
      });
      $('.lightbox-next').click(function() {
          lightboxcounter++;
          console.log(lightboxcounter);
          $('.lightbox-trigger[data-counter="'+lightboxcounter+'"]').click();
      });



  });

</script>

如果有人能帮忙，我会非常感激的，它整天都在烦我！ 干杯

您已经在使用fadeIn来显示控件，所以您需要做的只是最初隐藏它们。 将此添加到您的CSS

.lightbox-prev, .lightbox-next {
    display: none;
}

.lightbox-prev, .lightbox-next {
    display: none;
}