图像滚动淡入，完成后转到下一部分

Question

我正在努力完成的事情：

1. 图像根据滚动转到下一张。
2. 图像将循环显示，当它们全部完成后，视图将进入底部。我现在遇到的一个问题是，当我滚动时，视图不会停留在图像上，而是移动到页面的其余部分——所以即使图像发生变化，图像也不再位于视口。
3. fadeIn 转到下一张图片（或使用其他动画）。
4. 向上滚动时，它会返回图像序列。

如果有 jQuery 插件可以做到这一点，请随时参考。

jsfiddle：http://jsfiddle.net/jzhang172/gcSe8/145/

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(document).scrollTop() > 100) {
            $(".img-container > img").fadeIn("slow").attr('src',' http://vignette3.wikia.nocookie.net/pokemon/images/1/13/007Squirtle_Pokemon_Mystery_Dungeon_Explorers_of_Sky.png/revision/latest?cb=20150105230449');
        } else if ($(document).scrollTop() > 110) {
   $(".img-container > img").fadeIn("slow").attr('src','http://vignette2.wikia.nocookie.net/pokemon/images/5/52/417Pachirisu_Pokemon_Ranger_Shadows_of_Almia.png/revision/latest?cb=20141021151508');
        }
    });
});

.left{
  position:fixed;
  left:0;
  height:100%;
  width:200px;
  background:black;
  color:white;
  font-size:20px;
  text-align:center;
}
body,html{
margin:0px;
}
.bottom{
  height:500px;
  width:100%;
  background:gray;
 
}
.bottom p{
  text-align:center;
  font-size:40px;
}
.img-container{
  height:700px;
  width:100%;
}
.img-container img{
  height:100%;
  width:auto;
}
.img-container p{
  position:absolute;
text-align:center;
color:#00FFF5;
font-size:30px;
margin:300px;
background:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">

  <p>
  This is fixed!
  </p>

</div>
<div class="img-container">
<p>
This section should stay focused on image until all images have been scrolled through and then it can go to the bottom.
</p>
  <img src="https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg">
  
</div>

<div class="bottom">
  <p>
  Please don't cover me
  </p>
</div>

Answer 1

试试这个：

$(document).ready(function () {
  var images_index = 0;
  var act_cycle = 0;
  var n_cycles = 5;
  var images = ["https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg","http://vignette3.wikia.nocookie.net/pokemon/images/1/13/007Squirtle_Pokemon_Mystery_Dungeon_Explorers_of_Sky.png/revision/latest?cb=20150105230449","http://vignette2.wikia.nocookie.net/pokemon/images/5/52/417Pachirisu_Pokemon_Ranger_Shadows_of_Almia.png/revision/latest?cb=20141021151508",]
  $(window).on('DOMMouseScroll mousewheel', function (e) {
    if ($(".img-container").is(':hover')){  	
      if (e.originalEvent.wheelDelta < 0) {
      	if(images_index < images.length-1){
          $(document).scrollTop(".img-container");
          e.preventDefault();
          e.stopPropagation();
          if(++act_cycle % n_cycles == 0){
            act_cycle = 0;
            $(".img-container > img").hide().attr('src',images[++images_index]).fadeIn("slow");
          } 
        }
      } 
      else {
        if(images_index > 0){
          $(document).scrollTop(".img-container");
          e.preventDefault();
          e.stopPropagation();
          if (--act_cycle == -n_cycles){
            act_cycle = 0;
            $(".img-container > img").hide().attr('src',images[--images_index]).fadeIn("slow");
          }
        }
      }
     }
  });
});

.left{
  position:fixed;
  left:0;
  height:100%;
  width:200px;
  background:black;
  color:white;
  font-size:20px;
  text-align:center;
  z-index: 2;
}
body,html{
margin:0px;
}
.bottom{
  height:500px;
  width:100%;
  background:gray;
 
}
.bottom p{
  text-align:center;
  font-size:40px;
}
.img-container{
  height:700px;
  width:100%;
  z-index: 1;
}
.img-container img{
  height:100%;
  width:auto;
  z-index: 1;
}
.img-container p{
  position:absolute;
text-align:center;
color:#00FFF5;
font-size:30px;
margin:300px;
background:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
  <p>
  This is fixed!
  </p>
</div>
<div class="img-container">
  <p>
    This section should stay focused on image until all images have been scrolled through and then it can go to the bottom.
  </p>
  <img src="https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg">
</div>
<div class="bottom">
  <p>
    Please don't cover me
  </p>
</div>

说明：

图片根据滚动跳转到下一张。

为了解决这个问题，我只是将所有图像放入一个数组中，根据我根据滚动方向更新的数组的索引更改 src（请参阅wheelDelta）

图像将循环显示，当它们全部完成后，视图 将进入底部。我的权利有问题 现在是，当我滚动时，视图不会停留在图像上，但是 移动到页面的其余部分——所以即使图像发生变化， 图像不再在视口中。

为了防止正常滚动，我使用了 DOMMouseScroll 和鼠标滚轮事件，然后使用了 preventDefault 和 stopPropagation，并且我仅在 img-container 悬停时触发此逻辑。

进入下一张图片时淡入（或使用其他动画）。

我只是先fadeOut，更改src，最后fadeIn

向上滚动时，它会返回图像序列。

用图像数组解决。

此外，我添加了一些 z-index，因为 jQuerys 的淡入/出和 scrollTop 的行为可以在图像发生变化时修复图像上的视图

更新：如果你想在一定数量的'cycles'中改变图像你可以添加一个var来控制它（这里是n_cycles，改变他的值来改变数量您想要的周期等到图像更改，我将它设置为 5，就像您在 cmets 中所说的那样。