jQuery image slider boucle avec setInterval

J'ai ce balisage:

<div id="imagedisplay">
    <div class="slider_item active"></div>
    <div class="slider_item"></div>
    <div class="slider_item"></div>
    <div class="slider_item last"></div>
</div>

et ce script

setInterval(function(){
    $('.slider_item.active').fadeOut().removeClass('active')
        .next('.slider_item').fadeIn().addClass('active');
}, 5000);

Comment puis-je faire cette boucle de la meilleure façon? Droit maintenant, la dernière image s'estompe, sans que le premier décoloration de l'image à nouveau.

InformationsquelleAutor afcdesign | 2012-09-06

Vérifier si nextItem a des éléments et, si non, retournez à la première:

var nextItem = $('.slider_item.active')
    .fadeOut()
    .removeClass('active')
    .next('.slider_item');

if (nextItem.length === 0) {
   nextItem = $('.slider_item').first();
}

nextItem.fadeIn().addClass('active');

Voici un exemple: jsFiddle

Merci, j'ai pu facilement modifier ce, de la façon que je voulais 🙂

InformationsquelleAutor Joe

Démo: http://jsfiddle.net/gdS8Q/2/

var cur = 0;
var count = $('.slider_item').length;

$('.slider_item').hide();
$('.slider_item').eq(0).show();

setInterval(function() {    
    $('.slider_item').eq(cur).fadeOut(function () {
        $(this).removeClass('active');
        cur = (cur + 1) % count;
        $('.slider_item').eq(cur).addClass('active').fadeIn();
    });
}, 2000);

Il fonctionne, le seul problème est qu'il s'efface l'image précédente avant de disparaître dans l'autre, ce qui rend le curseur sur l'image de flash beaucoup. Cela peut-il être d'autre?

InformationsquelleAutor Danil Speransky

0

En fait je viens d'écrire un plugin pour cela et c'est assez lisible, de sorte que vous pouvez probablement comprendre simplement en le regardant.

Dépôt Github - https://github.com/joshbedo/fullPageSlider/blob/master/fullpagesliderV2.js

Certaines des fonctionnalités pour les flèches est encore en cours d'élaboration pour être plus dynamique, mais il fonctionne ici est un exemple comme un bien. Je suis coulissantes en html, mais vous pouvez facilement ajouter un .faites glisser le panneau de la classe avec des images à l'intérieur.

En action
http://strikingalchemy.publishpath.com/portfolio

EDIT: Ils ont édité le script donc il n'a pas un setInterval boucle de l'original sur github a un intervalle de boucle une fois que l'utilisateur clique sur la flèche et est intéressé à en savoir plus. Facilement modifiable si vous le souhaitez boucle sur la charge ... je ne voulais pas utiliser des ressources supplémentaires lorsque l'utilisateur n'était pas intéressé. Allez-vous mettre un exemple sur github plus tard après le travail.
- Je ne suis pas apprendre quoi que ce soit de l'aide de plugins, mais merci quand même 🙂
InformationsquelleAutor Josh Bedo

Je sais que c'est en cognant un vieux thread, mais quelqu'un peut me dire le code pour afficher la précédente div?

C'est le HTML

<div id="imagedisplay">
    <div class="slider_item active"></div>
    <div class="slider_item"></div>
    <div class="slider_item"></div>
    <div class="slider_item last"></div>
</div>

et le jQuery

     var nextItem = $('.slider_item.active')
        .fadeOut()
        .removeClass('active')
       .next('.slider_item');

 if (nextItem.length === 0) {
       nextItem = $('.slider_item').first();
    }
       nextItem.fadeIn().addClass('active');

J'ai vu le jsfiddle lien et essayé plusieurs combinaison mais cant semblent saisir le bon code

Grâce

InformationsquelleAutor Lucian Al-Zafari

Vous devez vous connecter pour publier un commentaire.