创建行走循环动画Javascript/CSS

我需要创建一个行走循环，在每个卷轴上，图像都应该切换到下一个

我尝试：

如果滚动页面，则动画未完成

我对步行自行车的想法就是：

---

我希望有人有想法

您的代码看起来不错，以这个非常平淡的示例为例，不要编写索引，而是像示例中那样设置src属性

$(window).scroll(function () {
  var fullheight = $(document).height();
  var progress = window.pageYOffset/fullheight;
  var subimagecount = 8;
  var subimage = Math.floor(progress * subimagecount)
  $('.counter').text(subimage);
});

---

根据您的示例，您需要将动画功能添加到滚动处理程序中，并在加载文档时对其进行初始化：

const imageArr = ["img/walk1.png", "img/walk2.png", "img/walk3.png", "img/walk4.png"];

function animate() {
  windowScrollCount = $(this).scrollTop();
  animationFrame = (windowScrollCount / 8);
  animationFrame = Math.floor(animationFrame % imageArr.length);
  $('#walk').attr("src", imageArr[animationFrame]);
}

$('#container').on('scroll', animate);

$(function() {
  animate();
});

---

以数字为例。

如果我滚动计数器，可以在1、2、3或4上停止。我的目标是在每个滚动中，函数从1开始，到4结束

例： 滚动-->[1,2,3,4,1] 但是现在 滚动-->[1,2]或[1,2,3]

const imageArr = ["img/walk1.png", "img/walk2.png", "img/walk3.png", "img/walk4.png"];

function animate() {
  windowScrollCount = $(this).scrollTop();
  animationFrame = (windowScrollCount / 8);
  animationFrame = Math.floor(animationFrame % imageArr.length);
  $('#walk').attr("src", imageArr[animationFrame]);
}

$('#container').on('scroll', animate);

$(function() {
  animate();
});