Question

我希望有人能帮助我解决这个问题，我在javascript方面很烂，而在html n css方面也不太好。

我想用淡入淡出的效果更改滚动的图像背景，为此我创建了小提琴。

 var $nav = $('nav');
 var winh = window.innerHeight;
 var scrollPos = 0;
 $(window).on('scroll', function() {

   scrollPos = Number($(window).scrollTop().toFixed(1));
   page = Math.floor(Number(scrollPos / winh) + 1); 
   if (page == 1) {
     $('.test1').addClass('active');
     $('.test2').removeClass('active');
     $('.test3').removeClass('active');
   } else if (page == 2) {
     $('.test1').removeClass('active');
     $('.test2').addClass('active');
     $('.test3').removeClass('active');
   } else if (page == 3) {
     $('.test1').removeClass('active');
     $('.test2').removeClass('active');
     $('.test3').addClass('active');
   } else {
     $('.test1').removeClass('active');
     $('.test2').removeClass('active');
     $('.test3').removeClass('active');
   }
   $nav.html("Page# " + page + " window position: " + scrollPos);

 });

nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 70px;
  width: 100%;
  background-color: silver;
  z-index: 999;
  text-align: center;
  font-size: 2em;
  opacity: 0.8;
}

.media {
  min-height: 100vh;
  width: 100%;
  max-width: 100vh;
  margin-left: auto;
  margin-right: auto;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s, visibility 1s 1s;
}

.media.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s, visibility 1s 0s;
}

.media .image {
  position: fixed;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0 auto;
}

.media .caption {
  margin-top: 50vh;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
  display: inline-block;
  position: relative;
  z-index: 10000;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav></nav>
<figure class="media test1" data-media-action="modal">
  <div class="image">
    <img src="https://static01.nyt.com/images/2017/05/31/world/australia/outback-photo-essay-ss-slide-08UQ/outback-photo-essay-ss-slide-08UQ-superJumbo.jpg" />
  </div>
  <figcaption class="caption" itemprop="caption description">
    <div class="caption-text">

      Harvesting kangaroos for meat at Plumbago Station, South Australia.

    </div>
  </figcaption>
</figure>


<figure class="media test2" data-media-action="modal">
  <div class="image">
    <img src="https://static01.nyt.com/images/2017/05/31/world/australia/outback-photo-essay-ss-slide-TYTD/outback-photo-essay-ss-slide-TYTD-superJumbo.jpg" />
  </div>
  <figcaption class="caption" itemprop="caption description">

    <div class="caption-text">

      Abandoned cars littered an opal mining site in Coober Pedy.

    </div>
  </figcaption>
</figure>

<figure class="media test3" data-media-action="modal">
  <div class="image">
    <img src="https://static01.nyt.com/images/2017/05/31/world/australia/outback-photo-essay-ss-slide-EE5O/outback-photo-essay-ss-slide-EE5O-superJumbo.jpg" />
  </div>
  <figcaption class="caption" itemprop="caption description">
    <div class="caption-text">
      FERAL DOGS THAT WERE KILLED BY RANCHERS SEEKING TO PROTECT LIVESTOCK IN TAMBO, QUEENSLAND.
    </div>
  </figcaption>
</figure>

问题出在这里

我认为我的代码效率不高，如果我有20张或更多图片会出现问题吗？请提供有关更有效代码的建议。
图像在页面加载时不显示，您需要先滚动。每当您刷新页面时，如何使图像加载？
为什么最后一张图片与第一张图片和其他图片的高度不同？

谢谢

Answer 1

1）是的，如果您可以编写一个循环来显示图像，则代码效率不高，而不是使用它！您可以将图像存储在数据库中，并使用查询来检索图像。您可以使用简单的SQL数据库和任何脚本语言来获取我建议使用PHP的数据

2）第二个问题的解决方法是使用jquery的load（）方法，而不是on（）方法

3）我看不到小提琴的输出，请分享屏幕截图

在滚动javascript上更改多个图像背景

1 个答案: