Créer un simple sélecteur d'image automatique en utilisant jQuery

Question

Je dois créer un simple sélecteur d'image qui change automatiquement mes images. Je le code suivant: (. Toutes les 3-4 secondes)

<div class="imgCarousel"> 
    <div class="imgC1 left"><img src="/media/1614/1_1.jpg" alt="img1" /></div> 
    <div class="imgC2 left"><img src="/media/1615/2_1.jpg" alt="img2" /></div> 
    <div class="imgC3 left"><img src="/media/1616/3_1.gif" alt="img3" /></div> 
    <div class="imgC4 left"><img src="/media/1617/4_1.jpg" alt="img4" /></div> 
    <div class="imgC5 left"><img src="/media/1618/5_1.jpg" alt="img5a" /></div> 
    <div class="imgC6 left"><img src="/media/1620/6_1.jpg" alt="img6a" /></div> 
    <div class="imgC7 left"><img src="/media/1622/7.jpg" alt="img7" /></div> 
</div> 

Deux des images ci-dessus doit être commuté automatiquement après un certain laps de temps. Cela signifie qu'après 4 secondes, je voudrais changer l'image appelée /media/1618/5_1.jpg avec une autre image. Et après encore 4 secondes, je revenais à nouveau. Le même shold soit fait pour une de mes autres images. Comment puis-je accomplir cela avec un peu de jQuery?

Answer 1

Je ne vais pas coder pour vous ... et il y a tellement de façons de tuer un chien ...

donner ce lien ou les méthodes jQuery une lecture de ...

• setInterval
• selectors
• .before()
• .after()

obtenir un code à démarrer, puis revenir quand avoir des problèmes avec les codes ...

Answer 2

En utilisant votre code comme référence, vous pouvez simplement utiliser un setInterval qui montre/cache les divs que vous voulez. Cependant, il existe des dizaines de façons différentes de le faire.

Le setInterval serait:

var loop = setInterval("nextImage()",1000); 

Alors nextImage() serait afficher/masquer les images, je vais utiliser jQuery comme exemple:

var index = 0; 
var images_size = $(".imgCarousel div").size(); 

function nextImage(){ 
// we hide all the divs and show the next one only 
$(".imgCarousel div").hide(); 
$(".imgCarousel div").eq(index).show(); 
// we continue the iteration 
index = index+1; 
if(index >= images_size){ index = 0; } 
} 

C'est une improvisation rapide et sale à titre d'exemple, mais, encore une fois, il y a beaucoup de façons de le faire. Vous pourriez vouloir vérifier les fonctions comme load(), src() pour les précharges, et d'autres comme fadeIn(), fadeOut() ... pour la transition douce/effets.