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

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