Modifier les images en utilisant JQuery

Question

J'ai tag d'image sur ma page. J'ai besoin que cette balise montre des images différentes toutes les 1s. Mes images sont stockées dans le dossier "pict". Comment y parvenir en utilisant JQuery?

Answer 1

Un simple rotateur d'image que j'utilise est ci-dessous. Vous devrez rendre toutes les images dans un div à partir de votre dossier, en utilisant un langage côté serveur.

voir travailler ici: http://jsbin.com/iledo3

Si vous avez beaucoup d'images, je vous recommande de les pré-charger en premier.

HTML:

<div id="slideshow-container"> 
    <div id="slideshow"> 
     <img src="img/home-1.jpg"> 
     <img src="img/home-2.jpg"> 
     <img src="img/home-3.jpg"> 
    </div> 
</div> 

CSS:

#slideshow-container { height:410px; position:relative; } 
#slideshow-container img { position:absolute; left:0; top:0; width:100%; height:100% } 
#slideshow  { position:absolute; left:0; top:0; width:100%; height:100%; list-style:none } 
#slideshow img { width:904px; height:410px; background-repeat:none; background-position:top left; position:absolute; left:0; top:0 } 
#slideshow  { position:absolute; left:0; top:0; width:100%; height:100%; } 
#slideshow img { width:904px; height:410px; background-repeat:none; background-position:top left; position:absolute; left:0; top:0 } /* adjust this for your images */ 

jQuery:

$('#slideshow img:gt(0)').hide(); //hide all images except first initially 
    setInterval(function(){ 
     $('#slideshow :first-child').fadeOut('slow') 
     .next('img').fadeIn('slow') 
     .end().appendTo('#slideshow');}, 
     2000); //2 second interval 

Answer 2

Vous pouvez soit saisir l'élément img et utiliser le attr method pour modifier son src, soit replace avec un élément img différent. De toute façon, vous voudrez probablement utiliser setInterval pour gérer le calendrier.

Answer 3

Est-ce que le plugin jQuery Cycle peut vous aider?

Answer 4

Stockez toutes vos sources d'images dans un tableau, puis, si vous souhaitez en sélectionner un au hasard, utilisez la fonction Math.random et utilisez enfin jQuery.attr() pour changer l'attribut src de votre image. Tout cela devrait être à l'intérieur d'une fonction qui est déclenchée chaque seconde. Voici un projet de version du code, en supposant que vos images sont stockées dans le dossier images par rapport à votre URL actuelle:

function imageRotate() { 
    var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"]; 
    var i = Math.floor(Math.random() * images.length); 
    jQuery('#my-image').attr("src", "/images/" + images[i]); 
    setTimeout('imageRotate()', 1000); // Re-launch after one second 
} 
setTimeout('imageRotate()', 1000); // First launch after 1 second interval 

Sinon, vous pouvez essayer le jQuery Cycle plugin.

Answer 5

Exemple:http://jsfiddle.net/8GkS7/

$(function() { 
    var images_array = [ 
     "/pict/image0.jpg", 
     "/pict/image1.jpg", 
     "/pict/image2.jpg", 
     "/pict/image3.jpg", 
     "/pict/image4.jpg" 
    ]; 

    var i = 0; 
    var len = images_array.length; 
    var $img = $('#myImage'); 

    setInterval(function() { 
     $img.attr('src', images_array[ i++ % len]); 
    }, 1000); 
}); 

Ou si vos images sont numérotées comme ça, vous pouvez réellement faire sans le tableau:

$(function() { 
    var i = 0; 
    var len = 5; // Total number of images 
    var $img = $('#myImage'); 

    setInterval(function() { 
     $img.attr('src', "/pict/image" + (i++ % len) + ".jpg"); 
    }, 1000); 
}); 

EDIT: Notez que pour utiliser la deuxième exemple, le numéro d'index pour vos images doit commencer par 0. Si elles commencent par 1, vous aurez besoin de (i++ % len + 1).