使用 jQuery fadeIn() 和 fadeOut() 隔行扫描背景图像答案

【问题标题】：Interlacing background images using jQuery fadeIn() and fadeOut()使用 jQuery fadeIn() 和 fadeOut() 隔行扫描背景图像
【发布时间】：2014-01-19 14:08:26
【问题描述】：

我使用以下函数制作带有淡入淡出效果的图像幻灯片。

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 在屏幕上显示 0 到 5 秒，从 5 到 5.4 秒开始淡出
图像2首先隐藏，从4.8s开始淡入到5.2s（为了填补淡入和淡出之间的空白），从5.2s保持到10.2s，然后从10.2s开始淡入到10.6s
图3先隐藏，10.4s到10.8s开始淡入，10.8s到15.8s保持，15.8s到16.2s开始淡出
（并且图像 1 以类似的逻辑返回，永远循环，直到计时器清零）

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

【问题讨论】：

您可以编辑jsfiddle.net/arunpjohny/HcfyD/1 以重新创建案例
setInterval 的使用也有一个 bug - 应该是 setTimeout
空白可能是因为图像的加载时间......你预加载修复它
更改了setTimeout() 并重新添加了fadeOut()
见jsfiddle.net/arunpjohny/HcfyD/4

标签： jquery

【解决方案1】：

LIVE DEMO

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

<div id="bg2"><div id="bg1"></div></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 ...

【讨论】：

如果我想停止/暂停效果，如何停止loop()？
@ShivanRaptor 你可以像jsbin.com/owiqIxA/6/edit 那样使用 setInterval
@ShivanRaptor 或类似使用几乎相同的代码但设置悬停标志：jsbin.com/owiqIxA/7/edit
@ShivanRaptor 使用 setinterval 效果更好。另一个在 mouseenter 上不太准确。

【解决方案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 = $('<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();

演示：Fiddle

【讨论】：