jquery slideshow à l'aide des images de fond

J'ai un div qui a actuellement un arrière-plan statique de l'image.

J'ai besoin de créer un diaporama d'images d'arrière-plan pour cette div.

Je suis en mesure d'atteindre cet objectif en de simplement définir un délai d'attente et ensuite de changer l'image de fond en CSS mais ce n'est pas très élégant.

Je souhaiterait idéalement à faire pâlir les images de fond et dans, mais la div qui contient d'autres éléments de la page donc je ne peux pas modifier l'opacité d'une quelconque manière.

Personne ne sait d'une bonne façon de le faire à l'aide de jquery??

Voici un code qui s'estompe out/in, mais s'efface le contenu de la div trop.

$("#slideshow").fadeOut(5000, function(){
    $("#slideshow").css('background-image','url(myImage.jpg)');
    $("#slideshow").fadeIn(5000);
});

InformationsquelleAutor Tom | 2011-03-04

HTML:

<div class="slideshow"></div>

CSS:

.slideshow
{
    position: relative;
    width: 350px;
    height: 150px;
}
.slideshow img
{
    position: absolute;
    width: 350px;
    height: 150px;
    z-index:-1;
}

jQuery

var images=new Array('http://placehold.it/250x150','http://placehold.it/250x150/123456','http://placehold.it/250x150/dbca98');
var nextimage=0;

doSlideshow();

function doSlideshow()
{
    if($('.slideshowimage').length!=0)
    {
        $('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();$(this).remove()});
    }
    else
    {
        slideshowFadeIn();
    }
}
function slideshowFadeIn()
{
    $('.slideshow').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(500,function(){setTimeout(doSlideshow,1000);}));
    if(nextimage>=images.length)
        nextimage=0;
}

jsfiddle Démo

InformationsquelleAutor Gareth

Que diriez-vous d'un coup de pouce de la pagination de la liste, pour mettre à jour l'image d'arrière-plan sur la souris, puis, une seconde ou deux, et il commence à en fondu avec le prochain bg img automatiquement?

HTML:

<div class="slideshow">
    <h1>Text</h1>
    <input type="button" value="Hello" />
</div>

<ul>
    <li><a href="#"><img src="http://placehold.it/50x50"></a></li>
    <li><a href="#"><img src="http://placehold.it/50x50/123456"></a></li>
    <li><a href="#"><img src="http://placehold.it/50x50/dbca98"></a></li>
</ul>

CSS:

.slideshow
{
    position: relative;
    width: 350px;
    height: 150px;
}
.slideshow img
{
    position: absolute;
    width: 350px;
    height: 150px;
    z-index:-1;
}

ul {position: absolute; top: 125px; left: 75px;}

li {
    float: left;
    border: 1px solid #000;
    margin: 15px;

}

Javascript:

var images=new Array('http://placehold.it/250x150','http://placehold.it/250x150/123456','http://placehold.it/250x150/dbca98');
var nextimage=0;

doSlideshow();

function doSlideshow()
{
    if($('.slideshowimage').length!=0)
    {
        $('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();$(this).remove()});
    }
    else
    {
        slideshowFadeIn();
    }
}
function slideshowFadeIn()
{
    $('.slideshow').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(500,function(){setTimeout(doSlideshow,1000);}));
    if(nextimage>=images.length)
        nextimage=0;
}

Voir ensemble au http://jsfiddle.net/tatygrassini/R4ZHX/75/.

InformationsquelleAutor Taty

0

Au lieu de simplement en changeant l'image de fond, vous pourriez d'abord appel
```
   fadeOut()
```
puis modifier la source, et ensuite appeler
```
   fadeIn()
```
quelque chose comme...
```
$('#image').fadeOut(500, function() {
        $(this).attr('src', 'new-image.png')
            .load(function() {
                $(this).fadeIn();
            });
    });
```
À utiliser une variété d'images, il y a un certain nombre de solutions, mais il vous suffit d'itérer sur une liste d'entre eux.
- Ce n'est pas de changer l'image de fond d'un div.
- Merci, mal lu la question. Pouvez-vous créer un Autre div en position absolue ci-dessous?
- Ni est la réponse que vous avez accepté.
InformationsquelleAutor Orbit

Vous pouvez créer une position absolue et avec un curseur plugin modifier les images contenues dans le div. Otherwize vous avez sprite arrière-plan. J'ai réalisé cela avec la Des Outils de Jquery plugin onglets.

$(".slidetabs").tabs(".images > div", {

    //enable "cross-fading" effect
    effect: 'fade',
    fadeOutSpeed: "slow",

    //start from the beginning after the last tab
    rotate: true

//use the slideshow plugin. It accepts its own configuration
}).slideshow();

InformationsquelleAutor Jepser Bernardino

0

Voici une solution qui s'adresse non seulement votre problème, mais permettra également de résoudre d'autres problèmes. Créer un autre DIV sur votre DOM comme une superposition, et de l'exécution de vos fonctions de fondu sur cette DIV seulement. Il apparaîtra comme si le contenu est à la décoloration in /out. Cette approche est également plus performant, que vous êtes seulement à la décoloration d'une seule DIV au lieu de plusieurs éléments. Voici un exemple:
```
$('#containeroverlay').width($('#container').width()).height($('#container').height()).fadeIn('normal', function() {
    //Step 1: change your content underneath the hidden div
    //Step 2: hide the overlay
    $('#containeroverlay').fadeOut('normal');
})
 
```
Plus important encore, cette approche permettra de travailler dans IE6-8 sans vissage de la police lissage des éléments que vous pourriez avoir sur la div.

InformationsquelleAutor Joshua

Vous devez vous connecter pour publier un commentaire.