web-dev-qa-db-fra.com

Curseur / diaporama très simple avec bouton gauche et droit. Pas de lecture automatique

J'essaie de faire un curseur/diaporama d'image très, très simple sans lecture automatique s'il vous plaît. Je veux seulement aller à l'image suivante ou précédente en cliquant. Ayant quelques problèmes que vous pouvez lire ci-dessous.

Voici le jsFiddle http://jsfiddle.net/HsEne/12/ (j'ai juste utilisé des couleurs d'arrière-plan au lieu d'images dans le violon ainsi que le changement d'img en divs mais c'est exactement le même problème bien sûr)

Le HTML:

<div id="slider-wrapper">

<div id="slider">
<img class="sp" src="/img1.jpg">
<img class="sp" src="/img2.jpg">
<img class="sp" src="/img3.jpg">
<img class="sp" src="/img4.jpg">
<img class="sp" src="/img5.jpg">
<img class="sp" src="/img6.jpg">
</div>

<img id="button-previous" src="/button-arrow-left.jpg">
<img id="button-next" src="/button-arrow-right.jpg">
</div>

Le CSS:

#slider-wrapper {
display: block;
max-width: 790px;
margin: 5% auto;
max-height: 500px;
height: 100%; }

#slider {
display: block;
position: relative;
z-index: 99999;
max-width: 710px;
width: 100%;
margin: 0 auto; }

#button-previous { 
position: relative;
left: 0;
margin-top: 40%;
width: 40px;
height: 60px; }

#button-next {
position: relative;
margin-top: 40%;
float: right; }

.sp {
position: absolute; }

#slider .sp {
max-width: 710px;
width: 100%;
max-height: 500px; }

jQuery pour le bouton suivant:

jQuery("document").ready(function(){
    jQuery("#slider > img:gt(0)").hide();
     jQuery("#button-next").click(function() { 
        jQuery("#slider > img:first")
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .appendTo("#slider");
  });
});

Le jQuery ci-dessus fonctionne correctement, sauf qu'il saute la première image si un utilisateur clique sur le bouton suivant de la dernière diapositive. Il n'affiche la première image qu'une seule fois, toutes les autres images continueront de glisser chaque fois que vous cliquerez sur la prochaine. Pour une raison quelconque, affiche: aucune n'est ajoutée à la première image mais je ne sais pas d'où vient ce code.

jQuery pour le bouton précédent:

jQuery("document").ready(function(){
    jQuery("#slider > img:gt(0)").hide();
     jQuery("#button-previous").click(function() { 
        jQuery("#slider > img:last")
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .appendTo("#slider");
  });
});

Ce code jquery ci-dessus renverra l'image juste prévisualisée comme il se doit. Mais quand on clique à nouveau, cela ne fait rien.

J'ai également essayé .prev () en remplacement de .next (). Cela fonctionne très bien la première fois que vous cliquez sur le bouton précédent. Disons que nous regardons l'image n ° 4. Lorsque je clique sur le bouton précédent, il passe à l'image n ° 3, comme il se doit. Mais lorsque vous cliquez à nouveau dessus, il ne passe pas à l'image n ° 2, il revient à l'image n ° 4, puis n ° 3 puis n ° 4, se répétant.

jqueryonclicksliderslideshowautoplay
8
bob

Après avoir lu votre commentaire sur ma réponse précédente, j'ai pensé que je pourrais mettre cela comme une réponse distincte.

Bien que j'apprécie votre approche consistant à essayer de le faire manuellement pour mieux comprendre jQuery, je souligne tout de même le mérite d'utiliser des cadres existants.

Cela dit, voici une solution. J'ai modifié certains de vos fichiers CSS et HTML juste pour me permettre de travailler plus facilement avec

WORKING JS FIDDLE - http://jsfiddle.net/HsEne/15/

C'est le jQuery

$(document).ready(function(){
$('.sp').first().addClass('active');
$('.sp').hide();    
$('.active').show();

    $('#button-next').click(function(){

    $('.active').removeClass('active').addClass('oldActive');    
                   if ( $('.oldActive').is(':last-child')) {
        $('.sp').first().addClass('active');
        }
        else{
        $('.oldActive').next().addClass('active');
        }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();


    });

       $('#button-previous').click(function(){
    $('.active').removeClass('active').addClass('oldActive');    
           if ( $('.oldActive').is(':first-child')) {
        $('.sp').last().addClass('active');
        }
           else{
    $('.oldActive').prev().addClass('active');
           }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();
    });




});

Alors maintenant, l'explication.
Étape 1
1) Chargez le script sur le document prêt.

2) Prenez la première diapositive et ajoutez-y une classe "active" afin que nous sachions à quelle diapositive nous avons affaire.

3) Masquez toutes les diapositives et affichez la diapositive active. Alors maintenant, la diapositive # 1 est un bloc d'affichage et tous les autres sont affichés: aucun;

Étape 2 Utilisation de l'événement bouton-clic suivant.
1) Supprimez la classe active actuelle de la diapositive qui va disparaître et donnez-lui la classe oldActive afin que nous sachions qu'elle est en train de disparaître.

2) Vient ensuite une instruction if pour vérifier si nous sommes à la fin du diaporama et si nous devons revenir au début. Il vérifie si oldActive (c'est-à-dire la diapositive sortante) est le dernier enfant. Si c'est le cas, revenez au premier enfant et rendez-le "actif". Si ce n'est pas le dernier enfant, saisissez simplement l'élément suivant (en utilisant .next ()) et donnez-lui la classe active.

3) Nous supprimons la classe oldActive car elle n'est plus nécessaire.

4) fadeOut toutes les diapositives

5) Fondu dans les diapositives actives

Étape 3

Identique à l'étape deux, mais en utilisant une logique inverse pour parcourir les éléments en arrière.

Il est important de noter qu'il existe des milliers de façons d'y parvenir. Ceci est simplement mon point de vue sur la situation.

12
James

Pourquoi essayer de réinventer la roue? Il existe des solutions de diaporama jQuery plus légères sur lesquelles vous pouvez pousser un bâton, et quelqu'un a déjà fait le travail pour vous et réfléchi aux problèmes que vous pourriez rencontrer (compatibilité entre les navigateurs, etc.).

jQuery Cycle est l'une de mes bibliothèques préférées de poids léger.

Ce que vous voulez réaliser pourrait être fait en seulement

    jQuery("#slideshow").cycle({
    timeout:0, // no autoplay
    fx: 'fade', //fade effect, although there are heaps
    next: '#next',
    prev: '#prev'
    });

JSFIDDLE POUR VOIR COMME C'EST FACILE

11
James

Code très simple pour faire le curseur jquery Voici deux div d'abord le visualiseur de curseur et le second est le conteneur de liste d'images. Copiez-collez simplement le code et personnalisez-le avec css.

    <div class="featured-image" style="height:300px">
     <img id="thumbnail" src="01.jpg"/>
    </div>

    <div class="post-margin" style="margin:10px 0px; padding:0px;" id="thumblist">
    <img src='01.jpg'>
    <img src='02.jpg'>
    <img src='03.jpg'>
    <img src='04.jpg'>
    </div>

    <script type="text/javascript">
            function changeThumbnail()
            {
            $("#thumbnail").fadeOut(200);
            var path=$("#thumbnail").attr('src');
            var arr= new Array(); var i=0;
            $("#thumblist img").each(function(index, element) {
               arr[i]=$(this).attr('src');
               i++;
            });
            var index= arr.indexOf(path);
            if(index==(arr.length-1))
            path=arr[0];
            else
            path=arr[index+1];
            $("#thumbnail").attr('src',path).fadeIn(200);
            setTimeout(changeThumbnail, 5000);  
            }
            setTimeout(changeThumbnail, 5000);
    </script>
1
Kaushal Sachan