Javascript 有没有办法在不同的滚动点更改不同的图像？

我试图在滚动页面时一次更改一个图像。 当我们到达滚动的那个点时，这段代码实际上改变了所有图像类。 有没有其他方法可以在滚动时单独更改图像

多谢各位

jQuery(function($) {
    var show = $(".show");
    var hide = $(".hide");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

        if($(window).scrollTop() >= 500){
            show.removeClass('show').addClass("hide");
            hide.removeClass('hide').addClass("show");
        } else {
          show.removeClass("hide").addClass('show');
          hide.removeClass('show').addClass("hide");
        }

    });
});

---

由于您正在检查

窗口

和

隐藏/显示

的滚动位置，因此这将

隐藏/显示具有指定类名的所有元素

为了达到您的目的，向所有图像添加css
position:relative
（如果没有指定
position
）

然后，按如下方式遍历每个图像

jQuery(function($) {
    //var show = $(".show");
    //var hide = $(".hide");
    $(window).scroll(function() {    
        /*var scroll = $(window).scrollTop();

        if($(window).scrollTop() >= 500){
            show.removeClass('show').addClass("hide");
            hide.removeClass('hide').addClass("show");
        } else {
          show.removeClass("hide").addClass('show');
          hide.removeClass('show').addClass("hide");
        }*/
        var images = $('img');//or any other selector
        $.each(images, function () {
            if($(this).offset().top <= -500) {
                $(this).hide();
            }
            else {
                $(this).show();
            }
        });

    });
});

jQuery（函数（$）{
//var show=$（“.show”）；
//var hide=$（“.hide”）；
$（窗口）。滚动（函数（）{
/*var scroll=$（窗口）.scrollTop（）；
如果（$（窗口）.scrollTop（）>=500）{
show.removeClass（'show'）.addClass（“hide”）；
hide.removeClass（'hide'）.addClass（“show”）；
}否则{
show.removeClass（“hide”）.addClass（“show”）；
hide.removeClass（'show'）.addClass（“hide”）；
}*/
var images=$（'img'）；//或任何其他选择器
$。每个（图像、函数（）{
如果（$（this）.offset（）.top因为您正在检查
窗口的滚动位置
和
隐藏/显示
，这将
隐藏/显示具有指定类名的所有元素

为了达到您的目的，向所有图像添加css
position:relative
（如果没有指定
position
）

然后，按如下方式遍历每个图像

jQuery(function($) {
    //var show = $(".show");
    //var hide = $(".hide");
    $(window).scroll(function() {    
        /*var scroll = $(window).scrollTop();

        if($(window).scrollTop() >= 500){
            show.removeClass('show').addClass("hide");
            hide.removeClass('hide').addClass("show");
        } else {
          show.removeClass("hide").addClass('show');
          hide.removeClass('show').addClass("hide");
        }*/
        var images = $('img');//or any other selector
        $.each(images, function () {
            if($(this).offset().top <= -500) {
                $(this).hide();
            }
            else {
                $(this).show();
            }
        });

    });
});

jQuery（函数（$）{
//var show=$（“.show”）；
//var hide=$（“.hide”）；
$（窗口）。滚动（函数（）{
/*var scroll=$（窗口）.scrollTop（）；
如果（$（窗口）.scrollTop（）>=500）{
show.removeClass（'show'）.addClass（“hide”）；
hide.removeClass（'hide'）.addClass（“show”）；
}否则{
show.removeClass（“hide”）.addClass（“show”）；
hide.removeClass（'show'）.addClass（“hide”）；
}*/
var images=$（'img'）；//或任何其他选择器
$。每个（图像、函数（）{
如果（$（此）.offset（）.top我需要查看fiddle或HTML结构。但同时，我会发布一个可能的解决方案。代码中有一个断点，请记住滚动事件触发太频繁，因此，您的
show
类更改为hide，然后新的和旧的
hide
类都更改回
show
，然后所有内容都将更改为becomes
show
，反之亦然。我需要查看fiddle或HTML结构。但同时，我会发布一个可能的解决方案。代码中有一个断点，请记住滚动事件触发太频繁，因此，您的
show
类更改为hide，然后新的和旧的
hide
类都更改回hide<代码>显示
，然后一切都变为显示
，反之亦然。您好，谢谢您的回答，我正在一个WordPress项目中处理图像和类，共有3个图像，我的目标是当我滚动第一个图像时，它会变为动画，然后滚动到第二个，同样的效果会发生，依此类推h类但我有上面的问题，使用此代码，图像会闪烁，但实际上不会改变。如果您需要任何代码来帮助理解我可以粘贴到这里的结构。我假设您为
。隐藏
和
类定义了一些动画。显示
类？如果是这种情况，您需要在添加s之前设置超时如何让第一个动画在开始第二个动画之前结束。如果我能看到一些HTML/CSS，那么我将能够建议一个更好的解决方案。嘿，我已经用我正在使用的代码创建了一个粘贴库，希望它有帮助。谢谢你的回答，我正在一个WordPress项目中使用图像和类，有3个图像d我的目标是当我滚动第一个图像时，它会变成动画，然后滚动到第二个图像，同样的效果就会发生，依此类推。我正在使用类，但我遇到了上面的问题，使用此代码，图像会闪烁，但实际上不会改变。如果您需要任何代码来帮助理解我可以粘贴到这里的结构。我想您是否为
.hide
和
类定义了一些动画？如果是这样，您需要在添加show类之前设置一个超时，以允许第一个动画在开始第二个动画之前结束。如果我可以看到一些HTML/CSS，那么我将能够建议更好的解决方案。嘿，我创建了一个粘贴与我正在使用的代码bin，希望它有帮助。谢谢