Discussion :

[Invité]

Bonjour à tous,

J'ai deux petit problèmes pour réaliser un slideshow (pourtant très basique).
Voici le code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<ul id="homeSlidshowContainer">
    <li><img src="../img/P(1).png" /></li>
    <li><img src="../img/P(2).png" /></li>
    <li><img src="../img/P(3).png" /></li>
    <li><img src="../img/P(4).png" /></li>
    <li><img src="../img/P(5).png" /></li>
</ul>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#homeSlidshowContainer {
    overflow: auto;
    height: 400px;
}
 
#homeSlidshowContainer > li {
    position: absolute;
    height: 400px;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function() {
   $("#homeSlidshowContainer li:gt(0)").hide();
 
   $("#homeSlidshowContainer").click(function (event) {
       var $presentElem = $("#homeSlidshowContainer li:visible");
       var $nextElem = $("#homeSlidshowContainer li:visible").next("li");
 
       if ($nextElem.length < 1) {
           $nextElem = $("#homeSlidshowContainer li:first");
       }       
       $presentElem.fadeOut("slow");
       $nextElem.fadeIn("slow");
       $(this).delay(4000).trigger("click");
       event.stopPropagation();
   });
});

En fait le problème que j'ai c'est que lors du clic, tous les " li " défilent en non-stop alors que je n'ai pourtant réalisé qu'un seul clic, précédé d'un délai de 4 secondes (avant dernière ligne du code JavaScript).

Le second problème est que je ne parviens pas à faire exécuter un clic en boucle, avec ce même délai. Pour faire plus simple, je voudrais que le slideshow affiche les images en boucle sans que l'utilisateur aie à intervenir par un clic de démarrage. Vous me direz, ici c'est pourtant le cas mais c'était pour tester que le code fonctionne bien.

Si vous pouvez m'éclairer ce serait cool

[Bovino]

C'est une subtilité de la méthode .delay().
Elle ne sert pas à remplacer un setTimeout() mais à retarder les effets suivants dans la pile.
Tu ne peux pas chainer un effet et un gestionnaire d'événement.

[Invité]

Ok j'ai trouvé la solution (si jamais ça peut servir à quelqu'un )

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function() {
    $('#homeSlidshowContainer li:gt(0)').hide();
    launchSlideshow();
});
 
function launchSlideshow () {
    var $presentElem = $('#homeSlidshowContainer li:visible');
    var $nextElem = $('#homeSlidshowContainer li:visible').next('li');
    if ($nextElem.length < 1) {
        $nextElem = $('#homeSlidshowContainer li:first');
    }
    $presentElem.fadeOut('slow');
    $nextElem.fadeIn('slow');
    setTimeout("launchSlideshow()", 6000);
}

A+ et merci