更改滚动 JS/jQuery 上的图像

Question

本质上，我试图创建一个基本功能，可以滚动滚动图像。我这里有 jsfiddle 中的所有内容： https ://jsfiddle.net/JUST_RJ/6zb37d94/$(document).ready(function() {    $("#c1").fadeIn(0);    console.log()    $(window).scroll(function() {      var pos = $(document).scrollTop();      if (pos < 200) {        hideAll("c1");        $("#c1").fadeIn(0);      }      if (pos > 200 && pos < 400) {        hideAll("c2");        $("#c2").fadeIn(0);      }        if (pos > 400 && pos < 600) {        hideAll("c3");        $("#c3").fadeIn(0);      }    });    function hideAll(exceptMe) {      $(".image").each(function(i) {        if ($(this).attr("id") == exceptMe) return;        $(this).fadeOut(0);      });    }});现在我已经可以使用它了，尽管我认为添加更多图像时会变得复杂。我想保留 html 中列出的图像 src，以便轻松添加新图像并手动选择图像大小。我想知道 JS 部分是否可以简化为做两件事......获取滚动高度并自动添加预设值（200）以滑动到下一个图像。目前，必须手动添加更改图像的滚动量，如下所示......滚动到 200 时更改为图像 2在 200 > 600 处显示图像 2滚动到 600 时更改为图像 3ETC这将使每个图像显示 200 个滚动，然后轻拂到下一个图像，而无需每次手动添加滚动量和与前一个图像的距离。有没有办法可以简化代码，这样在js中，就不需要每次都添加新图像和id？也许有一种方法可以用“image”类来计算html中图像的数量，然后自动添加一个id号，在之前的id上加1？就像是..使用“image”类计算 html 中图像的数量商店数量（本例中为 3）创建#c1创建#c2创建#c3显示 #c1 滚动 200显示 #c2 滚动 200ETC谢谢！

Answer 1

这是你需要的吗

https://jsfiddle.net/rkv88/9tqcdp61/

imgSpaces 使用以下命令计算本例中 200范围内的元素：

"#c" + (Math.round(pos / imgSpace) + 1)

Answer 2

https://jsfiddle.net/fd69ensv/1/

将所有图像添加到 JS 中的数组中 使用Math.floor()向下舍入x / 200- 这将为您提供数组中图像的索引。更新img src滚动条。