带有平滑交叉淡入淡出的循环 jQuery 幻灯片答案

【问题标题】：Looped jQuery slideshow with smooth cross-fades带有平滑交叉淡入淡出的循环 jQuery 幻灯片
【发布时间】：2011-02-13 20:47:19
【问题描述】：

我正在尝试在主页上做一个简单的旋转图像。在后台，我正在读取一个目录，然后将图像的 url 填充到一个数组中。我想做的是交叉淡化图像。如果只是显示下一个的问题，这很容易，但由于我需要交叉淡入淡出，所以有点难。我想我想做的是通过在<img> 标记的opacity 值上调用animate() 来进行淡入淡出，并在换出封闭<div> 的css background-image 属性之间。但结果并不是那么好。

我已经使用工具制作更全功能的幻灯片，但如果可以避免的话，我不希望添加插件的开销，而且简单的淡入淡出似乎应该更容易。

这是我的 JavaScript（我使用的是 jQuery 1.3.2）：

var slideshow_images = ["http:\/\/example.com\/wordpress\/wp-content\/themes\/testtheme\/sidebar-home-bg\/bg1.jpg","http:\/\/example.com\/wordpress\/wp-content\/themes\/testtheme\/sidebar-home-bg\/bg2.jpg","http:\/\/example.com\/wordpress\/wp-content\/themes\/testtheme\/sidebar-home-bg\/bg3.jpg"];
var slideshow_index = 0;
var delay = 4000;
var swapSlides = function() {
 var slideshow_count = slideshow_images.length;
 // initialize the background to be the current image
 $('#home-slideshow').css({
  'background-image': 'url(' + slideshow_images[slideshow_index] + ')',
  'background-repeat:': 'no-repeat',
  'width': 200,
  'overflow': 'hidden'
 });
 slideshow_index = ((slideshow_index + 1) == slideshow_count) ? 0 : slideshow_index + 1;
 // fade out the img
 $('#home-slideshow img').animate({opacity: 0}, delay);
 // now, the background is visible
 // next change the url on the img
 $('#home-slideshow img').attr('src', slideshow_images[slideshow_index]);
 // and fade it up
 $('#home-slideshow img').animate({opacity: 1.0}, delay);
 // do it again
 setTimeout('swapSlides()', 4000);
}


jQuery(document).ready(function(){ 
 if (swapSlides) {
  swapSlides();
 }
});

这是我正在使用的标记：

<div id="home-slideshow"><img src="http://example.com/wordpress/wp-content/themes/testtheme/sidebar-home-bg/bg1.jpg" alt="" /></div>

【问题讨论】：

标签： javascript jquery animation slideshow

【解决方案1】：

您应该注意的第一件事，它一定会导致您的代码出现问题：动画方法不是同步的！所以当你这样做时：

$('#home-slideshow img').animate({opacity: 0}, delay);
 // now, the background is visible
 // next change the url on the img
 $('#home-slideshow img').attr('src', slideshow_images[slideshow_index]);

您开始制作动画，但该方法立即返回。你可以把动画想象成一个后台线程，虽然在 JavaScript 中没有线程这样的东西，而且一切都是使用 settimeout 调用来实现的。

所以在您的代码中，在您更改 src 属性的那一刻，图像可能仍然 99% 可见。然后你开始将它设置为 100% 的不透明度，但此时它仍然是 98%，两个“线程”将尝试同时使其出现/消失！

因此，在您的代码中需要设置超时以以正确的顺序执行任务（始终在其间留出几毫秒的余量），或者，当您有许多连续的函数调用时，使用回调更安全但可能不太可读动画方法的功能。例如：

$('#home-slideshow img').animate({opacity: 0}, delay, function(){
    // now, the background is visible
    // next change the url on the img
    $('#home-slideshow img').attr('src', slideshow_images[slideshow_index]);
    // and fade it up
    $('#home-slideshow img').animate({opacity: 1.0}, delay, function(){
        // do it again
        setTimeout('swapSlides()', 4000);
    });
});

最后，你正在做的是淡出 + 淡入。如果你想要一个真正的交叉淡入淡出，你需要在某个时候同时拥有 2 个元素：

开始：只有一个元素，不透明度为 100%
使用正确的背景图片 url 构建新元素（或使用 img 元素）
将新元素添加到不透明度为 0% 的 dom 树中，作为现有元素的同级元素
开始同时设置当前元素的不透明度从 100% 到 0% 以及新元素的不透明度从 0% 到 100% 的动画
删除旧的、现在不可见的元素

【讨论】：

【解决方案2】：

试试这个：

演示：http://jsbin.com/ipudo/7

几行jQuery

$(function(){
    $('#home-slideshow img:gt(0)').hide();
    setInterval(function(){
      $('#home-slideshow :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('#home-slideshow');}, 
      3000);
});

2行CSS

#home-slideshow { position:relative; height:332px; width:500px; }
#home-slideshow img { position:absolute; left:0; top:0; }

你的HTML

   <div id="home-slideshow">
      <img src="image.jpg" alt=""/>
      <img src="image.jpg" alt=""/>
      <img src="image.jpg" alt=""/>
       ...
       ...
    </div>

【讨论】：