这是我的代码
$(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/
我还需要为第三张图像制作动画。第一个和第二个正在更改其来源,但第三个没有。
请提出建议。
最佳答案
您想像这样一张一张地更改 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();
});
关于javascript - jquery 图像主动/非主动加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40676295/