jQuery diaporama

J'essaie de créer mon propre diaporama. Le code suivant s'estompe d'une image à l'autre. J'aimerais passer de img1.jpg à img4.jpg mais je ne sais pas trop comment faire une pause après chaque changement.jQuery diaporama

   i++; 
       temp = "img"+i+".jpg"; 
       $("#img").fadeOut(function() { 
        $(this).load(function() { $(this).fadeIn(); }); 
        $(this).attr("src", temp); 
       });

MISE À JOUR: J'ai modifié le code en code suivant. Sur le conseil de John Boker, j'ai renommé les images en img0, img1, img2, img3. Il va à la première, deuxième, troisième image le juste s'arrête. Des idées?

<html> 
    <head> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
     <script> 

      $(document).ready(function(){   
       var temp=""; 

       function slideshow(i) 
       { 
        temp = "img"+i+".jpg"; 
        $("#img").fadeOut(function() { 
         $(this).load(function() { 
            $(this).fadeIn(); 
            // set a timeout of 5 seconds to show the next image; 
            setTimeout(function(){ slideshow((i+1)%4); }, 5000); 
         }); 
         $(this).attr("src", temp); 
        }); 
       } 

       slideshow(0); 


      }); 

     </script> 
    </head> 
    <body> 
     <img src="img1.jpg" id="img"/> 
    </body> 
</html>

Source

2010-01-04 usertest

Vous pouvez le faire comme ça, en utilisant setInterval:

$(function() { 

    var i = 0; 

    // Four-second interval 
    setInterval(function() { 
     $("#img").fadeOut(function() { 
      $(this).attr("src", "img" + i++ % 4 + ".jpg"); 
      $(this).fadeIn(); 
     }); 
    }, 4000); 
}

J'ai simplifié quelques choses qui pourraient avoir causé certains des autres problèmes que vous voyez, en supprimant l'appel (apparemment superflu) à load à l'intérieur de votre rappel fadeOut et en éliminant la variable inutile temp.

(Enfin, si vous ne faites pas tout cela pour apprendre, pensez à utiliser l'un des nombreux excellents plugins diaporama là, comme Cycle.)

Source

2010-01-04 20:01:17

Fonctionne bien, mais comment peut-il être bouclé alors quand il arrive à img4, il revient à img1. J'ai essayé une instruction if mais je n'ai pas réussi à l'obtenir. Merci. – usertest

Oops, j'aurais dû mentionner que la variable 'i' doit être initialisée en dehors de la fonction, de sorte qu'elle ne soit pas localement étendue et réinitialisée chaque fois que la fonction s'exécute. Ce code révisé devrait fonctionner! –

mis en place window.setInterval(function, delay) pour appeler une fonction à un intervalle de jeu pour exécuter le code que vous avez.

Il ya beaucoup de plugins qui vont déjà faire défiler les images pour vous (sauf si le défi est d'écrire le vôtre), l'un de mes favoris est le cycle plugin.

Source

2010-01-04 19:59:42

Jetez un oeil à ce jQuery slideshow question

Source

2010-01-04 19:59:59

vous devriez probablement que dans une fonction:

// show image i 
function slideshow(i) 
{ 
    temp = "img"+i+".jpg"; 
    $("#img").fadeOut(function() { 
     $(this).load(function() { 
        $(this).fadeIn(); 
        // set a timeout of 5 seconds to show the next image; 
        setTimeout(function(){ slideshow((i+1)%4); }, 5000); 
     }); 
     $(this).attr("src", temp); 
    }); 
}

Source

2010-01-04 20:00:06

Merci, cela fonctionne mais a le même problème que Jeff Sternal - il ne boucle pas. Comment revenir à img1 après img4. Je ne peux pas obtenir l'instruction if pour le faire. – usertest

Si j'étais vous je commencerais à 0, donc il serait plus facile d'utiliser le module. le (i + 1)% 4 vous donnerait votre cycle, donc si i = 3, (3 + 1)% 4 = 0. vos images seraient nommées img0.jpg, img1.jpg, img2.jpg, img3.jpg –

Une astuce est d'utiliser un Animer une propriété d'un élément sa valeur actuelle en utilisant une minuterie.

Par exemple,

$("#img").fadeIn().show(3000).fadeOut();

Parce que $ (ce) est déjà visible, en ajoutant le .show (3000) signifie que l'élément reste visible pendant 3 secondes avant la sortie en fondu

Source

2010-01-04 20:33:08 Addsy

départ cet exemple .. .

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

A fiddle

simplement changer le 4000 en 8000 dans le script si vous voulez mettre en pause sur chaque image pendant 8 secondes au lieu de 4 secondes.

Source

2012-05-31 17:32:13 DaveAlger

Répondre

Questions connexes