javascript - jquery 图像主动/非主动加载

Question

这是我的代码

$(function(){
    var $list = $('.my-loading-list'),
        $imgs = $list.find('img'),
        animateImages = function(){
            var active = 0;
            setInterval(function(){
                active = $list.find('img.active').index();
                if(active > $imgs.length){
                    active = 0;
                } else {
                    active++;
                }
                $imgs.attr('src', 'https://cdn3.iconfinder.com/data/icons/cool-me-down-thermometers/70/Weather_cloudy_grey-128.png');
                $imgs.eq(active).addClass('active').attr('src', 'https://cdn3.iconfinder.com/data/icons/vibrant-weather/70/Colour_Weather_cloudy_grey-128.png');
            }, 300);

            setInterval(function(){
                $imgs.removeClass('active');
            }, 600);
        };

    animateImages();
});

这是片段:

https://jsfiddle.net/8d4xfjgt/

我还需要为第三张图像制作动画。第一个和第二个正在更改其来源，但第三个没有。

请提出建议。

Answer 1

您想像这样一张一张地更改 3 张图像，还是同时更改全部图像？问题是这个值没有正确更新 active = $list.find('img.active').index()。它交替取值 -1,0

$(function(){
        var $list = $('.my-loading-list'),
            $imgs = $list.find('img'),

            animateImages = function(){
                var active = 0;
                setInterval(function(){



                    if(active > $imgs.length){
                        active = 0;
                    } else {
                        active++;
                    }
                    $imgs.attr('src', 'https://cdn3.iconfinder.com/data/icons/cool-me-down-thermometers/70/Weather_cloudy_grey-128.png');
                    $imgs.eq(active).addClass('active').attr('src', 'https://cdn3.iconfinder.com/data/icons/vibrant-weather/70/Colour_Weather_cloudy_grey-128.png');
                }, 150);

                setInterval(function(){
                    $imgs.removeClass('active');
                }, 150);
            };

        animateImages();
    });