Change images using JQuery

Question

I have image tag on my page . I need that tag shows different images on every 1s. My pictures are stored in folder "pict". How to achieve this using JQuery ?

Answer 1

You can either grab the img element and use the attr method to alter it's src, or replace it with a different img element. Either way, you'll probably want to use setInterval to handle the timing.

Answer 2

Does the jQuery Cycle plugin could help you?

Answer 3

Store all your image sources in an array, then if you want to pick a random one use the Math.random function, and finally use jQuery.attr() to switch the src attribute of your image. All this should be inside a function which is fired every second. Here's a draft version of the code, assuming your images are stored in the images folder relative to your current URL:

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

Alternatively you can try the jQuery Cycle plugin.

Answer 4

Example: 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);
});

Or if your images are numbered like that, you could actually do it without the array:

$(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: Note that to use the second example, the index number for your images must start with 0. If they start with 1, you'll need (i++ % len + 1).

Answer 5

A simple image rotator that I use is below. You will need to render out all the images into a div from your folder, using some server side language.

See it working here: http://jsbin.com/iledo3

If you have a lot of images, I recommend pre-loading them first.

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