Jquery 循环浏览滚动条上不同大小的图像

我试图在滚动时通过图像进行更改（我知道jquery可能有点凌乱，但似乎可以正常工作），但我希望：

• 能够有不同高度和宽度的图像，而不是所有相同的大小（现在）

• 垂直/水平居中

这是一把小提琴：

谢谢

HTML:

JS:

$（文档）.ready（函数（）{
var a=$（document.height（）；
变量b=a-$（“#底部标记”）.position（）.top；
$（窗口）。滚动（函数（）{
var e=$（document.height（）；
var f=$（window.scrollTop（）；
var c=e-$（“#底部标记”）.position（）.top-f；
var d=b/5；
$（“span”）.html（c）；
如果（c>d*4）{
$（“#动画”）.attr（“src”https://picsum.photos/200/200?image=1")
}
如果（（cd*3））{
$（“#动画”）.attr（“src”https://picsum.photos/200/200?image=2")
}
如果（（cd*2））{
$（“#动画”）.attr（“src”https://picsum.photos/200/200?image=3")
}
如果（cd*1）{
$（“#动画”）.attr（“src”https://picsum.photos/200/200?image=4")
}
if（c

应在

发生了什么变化？

现在，

centreme

类只声明了3种样式：位置（固定）、宽度和高度（100%）。然后，通过以图像为目标（在本例中，使用附加类

图像标记

），我们可以使用以下声明将其完全集中在其父对象中：

.image-tag {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

---

简单地说，我们通过精确定位父对象的中心，然后定位子对象，使其中心位于父对象的顶部，从而使子对象居中。

我认为代码越少，效果越好

现在无需更改js和css部分，您就可以拥有任意数量的图像

$（函数（）{
var win=$（窗口），
图像=$（“.images>div”），
img=$（“.img>img”）；
img.attr（'src'，images.eq（0）.data（'img'）；
win.on（滚动）功能（事件）{
var st=win.scrollTop（），
num1=$（document.height（）/images.length，
num=数学四舍五入（st/num1）；
img.attr（'src'，images.eq（num）.data（'img'）；
});
});
body，html{
高度：8000px；
保证金：0；
背景颜色：灰色；
}
.img{
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

它工作得很好。差不多了！唯一的问题是页面的高度是由正文中的文本量定义的。图像如何根据内容的长度循环。请看这里：好的，我已经更新了答案。您只需要像这样更改num和num1变量
body,
      html {
        height: 7000px;
        margin: 0;
        background-color: grey;
      }

      .hidden {
        position: absolute;
        top: -9999999px
      }

      #bottommark {
        position: absolute;
        bottom: 0;
      }

      #contentwrapper {
        width: 100%;
        height: 100%;
        position: fixed;
      }

      .centreme {
        position: fixed;
        width: 200px;
        /* the image width */
        height: 200px;
        /* the image height */
        top: 50%;
        left: 50%;
        margin-top: -100px;
        /* half the image height */
        margin-left: -100px;
        /* half the image width */
      }

$(document).ready(function() {
        var a = $(document).height();
        var b = a - $("#bottommark").position().top;
        $(window).scroll(function() {
          var e = $(document).height();
          var f = $(window).scrollTop();
          var c = e - $("#bottommark").position().top - f;
          var d = b / 5;
          $("span").html(c);
          if (c > d * 4) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=1")
          }
          if ((c < d * 4) && (c > d * 3)) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=2")
          }
          if ((c < d * 3) && (c > d * 2)) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=3")
          }
          if (c < d * 2 && c > d * 1) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=4")
          }
          if (c < d) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=5")
          }
        })
      });

.image-tag {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}