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 ?
Add a comment
|
5 Answers
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).
Comments
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
1 Comment
Damir
But something strange happens when I come on page. I put six pictures and when load page gallery flicker quick one round pic-1 pic-6 pic-2 pic-6 pic-3 pic-6 pic-4 pic-6 pic-5 pic-6, after that it works great! Is that something with hidding problem ?
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.
Comments
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.
Comments
Does the jQuery Cycle plugin could help you?
