Javascript 在用户使用Javascrip上下滚动时更改图像

我有两个图像（一个闭合框和一个打开框），您可以查看我试图复制的工作动画。当用户在页面上下滚动时，图像会发生变化。我将如何创建这种效果

我已经尝试了下面的代码，但这对我不起作用。我哪里做错了

盒动画
.中心{
显示：块；
左边距：自动；
右边距：自动；
宽度：65%
风险值$cover\u img=$（“产品开闭”）；
var-top=0；
var开关X=10；
$（文档）.滚动（函数（事件）{
top+=1；
如果（顶部>=开关X）{
$cover_img.attr（'src'，'wp content/uploads/2021/02/open.png'）；
如果（顶部>=（开关X*2））
top=0；
}否则{
$cover_img.attr（'src'，'wp content/uploads/2021/02/closed.png'）；
}
});

这里有几个问题：

您选择了错误的ID。您想要的是

$（“#产品#打开#关闭”）

，而不是

$（“#产品#打开#关闭”）；

您正在更改

div

标记的src，而不是

img

标记，因此图像本身不会更改。您需要删除

div

标记，并将

id=“product\u open\u closed”

添加到

img

标记中

在窗口中，

top

已经是一个引用的全局变量。因此，由于您不在单独的js文件中，您需要将

top

重命名为其他变量，例如

offset

在ES6中，您希望避免现在使用

var

，而是使用

let

或

const

通常，您希望将不同的脚本拆分为不同的脚本标记。因此，如果您在一个脚本标记中加载jQuery，那么您不应该在该脚本标记中放置任何js，而应该创建一个单独的脚本标记

最终代码：

盒动画
让$cover_img=$（“#产品_open_closed”）；
设偏移量=0；
设开关x=10；
$（文档）.滚动（函数（事件）{
偏移量+=1；
如果（偏移量>=开关X）{
$cover_img.attr（'src'，'https://www.supamama.co.za/wp-content/uploads/2021/04/open-copy.png');
如果（偏移量>=（开关X*2））
偏移量=0；
}否则{
$cover_img.attr（'src'，'https://www.supamama.co.za/wp-content/uploads/2021/04/closed.png');
}
});