Diaporama jQuery en boucle avec des fondus en transparence

Question

J'essaie de faire une simple rotation d'image sur la page d'accueil. Sous le capot, je suis en train de lire un répertoire puis de remplir les urls des images en tableau. Ce que je veux faire est de fondre les images. Si c'était juste une question de montrer le prochain, c'est facile, mais comme j'ai besoin de cross-fader, c'est un peu plus difficile. Je pense que ce que je veux faire est de faire les fondus en appelant animate() sur la valeur opacity de la balise <img>, et entre permuter la propriété css background-image de la <div> englobante. Mais les résultats ne sont pas si bons. J'ai utilisé des outils pour plus de diaporamas complets, mais je ne veux pas l'ajout d'un plugin si je peux l'éviter, et un simple crossfade semble être plus facile.

Voici mon JavaScript (j'utilise 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(); 
} 
}); 

Et voici le balisage j'utilise:

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

Answer 1

La première chose que vous devriez être au courant et cela doit causer des problèmes avec votre code: les méthodes animate ne sont pas synchrones! Donc, quand vous faites:

$('#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]); 

Vous commencez à animer, mais la méthode revient immédiatement. Vous pouvez imaginer l'animation en tant que fil de fond, bien qu'il n'y ait pas de fil de discussion en JavaScript et que tout soit mis en œuvre en utilisant les appels settimeout.

Donc dans votre code, au moment où vous changez l'attribut src, l'image est probablement encore visible à 99%. Et puis vous recommencez à l'animer à 100% d'opacité, mais à ce stade c'est encore à 98%, et les deux "threads" vont essayer de le faire apparaître/disparaître simultanément! Donc, dans votre code, vous devrez soit définir des délais pour exécuter les tâches dans le bon ordre (en laissant toujours quelques millisecondes de marge entre les deux), ou, plus sûr, mais peut-être moins lisible lorsque vous avez plusieurs appels de fonction successifs, utilisez le fonction de rappel de la méthode animate. Par exemple:

$('#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); 
    }); 
}); 

Enfin, ce que vous faites est un fondu sortant + fondu.Si vous voulez un vrai croix fanent vous aurez besoin d'avoir 2 éléments simultanément à un moment donné:

1. début: il n'y a qu'un seul élément, avec une opacité de 100%
2. construire votre nouvel élément avec le droit URL l'image d'arrière-plan (ou utiliser un élément img)
3. ajouter le nouvel élément au dom tree avec opacité 0%, en tant que frère à celui existant
4. commencer à animer simultanément l'opacité de l'élément courant de 100% à 0% et l'opacité du nouvel élément de 0% à 100%
5. supprimer l'ancien, maintenant invi élément sible

Answer 2

essayez ceci:

DEMO: http://jsbin.com/ipudo/7

quelques lignes de jQuery

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

2 ligne de CSS

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

votre HTML

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