更改滚动 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 部分是否可以简化为做两件事......

1. 获取滚动高度并自动添加预设值（200）以滑动到下一个图像。

目前，必须手动添加更改图像的滚动量，如下所示......

• 滚动到 200 时更改为图像 2

• 在 200 > 600 处显示图像 2

• 滚动到 600 时更改为图像 3

• ETC

这将使每个图像显示 200 个滚动，然后轻拂到下一个图像，而无需每次手动添加滚动量和与前一个图像的距离。

1. 有没有办法可以简化代码，这样在js中，就不需要每次都添加新图像和id？也许有一种方法可以用“image”类来计算html中图像的数量，然后自动添加一个id号，在之前的id上加1？

就像是..

• 使用“image”类计算 html 中图像的数量

• 商店数量（本例中为 3）

• 创建#c1

• 创建#c2

• 创建#c3

• 显示 #c1 滚动 200

• 显示 #c2 滚动 200

• ETC

谢谢！

Answer 1

这是你需要的吗https://jsfiddle.net/rkv88/9tqcdp61/imgSpaces&nbsp;使用以下命令计算本例中 200范围内的元素："#c" + (Math.round(pos / imgSpace) + 1)

Answer 2

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