Question

我想要完成的事情：

图像根据滚动进入下一个。
图像将循环显示，当它们全部完成时，视图将进入底部。我现在遇到的一个问题是，当我滚动时，视图不会停留在图像上，而是移动到页面的其余部分 - 因此即使图像发生变化，图像也不再存在在视口中。
fadeIn当它转到下一个图像（或使用另一个动画）时。
向上滚动时，会返回图像序列。

如果有一个jQuery插件可以执行此操作，请随时参考。

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

＆＃13;

$(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');
        }
    });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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和mousewheel事件，然后是preventDefault和stopPropagation，我只会在img-container悬停时触发此逻辑。

fadeIn进入下一张图像（或使用其他动画）。

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

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

解决了图像数组。

在adition中，我添加了一些z-index，因为jQuerys fadeIn / Out的行为和scrollTop在更改时修复图像上的视图

更新：如果您想要在一定数量的“周期”中更改图片，可以添加一个var来控制它（这里是n_cycles，更改其值以更改你希望等到图像变化的周期数，我把它设置为5，正如你在评论中所说的那样。）

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

1 个答案: