使用jQuery fadeIn（）和fadeOut（）隔行扫描背景图像

我使用以下function来制作具有淡入和淡出效果的图像幻灯片。

var project_photos = ['image1.jpg', 'image2.jpg', 'image3.jpg']; var project_photo_index = 0; function nextPhoto() { $('#background').fadeOut(); $('#background').css('background-image', "url('images/" + project_photos[project_photo_index] + "')"); $('#background').fadeIn(); timer = setTimeout(function() { if (project_photo_index+1 > project_photos.length) { project_photo_index = 0; } else { project_photo_index++; } nextPhoto(); }, 5000); } 

但是，我想稍微调整一下这个函数来消除fadeOut()和fadeIn()之间的白色时​​刻。 我想要实现的是：

假设淡入和淡出时间为400ms，每个图像的显示时间为5s

1. 图1显示在屏幕上0到5秒，开始从5到5.4逐渐淡出
2. 图像2首先隐藏，从4.8s开始逐渐消失到5.2s（为了填补淡入和淡出之间的白色间隙），从5.2到10.2s保持不变，然后开始从10.2到10.6s逐渐淡出
3. 图像3首先隐藏，从10.4秒开始逐渐消失到10.8秒，从10.8秒到15.8秒，然后从15.8秒开始逐渐消失到16.2秒
4. （图像1以类似的逻辑返回，永远循环直到计时器清除）

如何调整代码以使其按照描述工作？

Answer 1

现场演示

如果你使用2个DIV元素，你可以淡化内部元素：

这就是你所需要的：

 var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'], n = images.length, c = 0, $1 = $('#bg1'), $2 = $('#bg2'); $.fn.setBG = function(){ return this.css({backgroundImage: "url(images/"+ images[c] +")"}); }; (function loop(){ $1.setBG().fadeTo(0,1).delay(2000).fadeTo(1000, 0, loop); c = ++c%n; $2.setBG(); })(); 

这是如何工作的：

 #bg1: set1 -- fadeOut -- set2 -- fadeOut -- set3 -- fadeOut -- set1 - ... #bg2: - set2 ------------- set3 ------------- set1 ------------- set2 ... 

Answer 2

尝试类似的东西

 var project_photos = ['//placehold.it/128/ff0000', '//placehold.it/128/ffff00', '//placehold.it/128/00ff00', '//placehold.it/128/00ffff']; var project_photo_index = 0; //preload the images $.each(project_photos, function (i, src) { var img = $('', { src: src }) }) function nextPhoto() { $('#background').fadeTo('normal', .5, function () { $(this).css('background-image', "url('" + project_photos[project_photo_index] + "')") $(this).fadeTo('normal', 1) }); project_photo_index++; project_photo_index = project_photo_index < project_photos.length ? project_photo_index : 0; setTimeout(nextPhoto, 5000) } nextPhoto(); 

演示： 小提琴