Search jQuery

jQuery Forum

Getting multiple images to fade in and out randomly.

in Using jQuery • 12 years ago

Hi,

I have a concept I want to develop but haven't been able to find a jQuery plugin that will do what i need. I am hoping if someone knows of a script or even to share if this is possible.

What I want is to have about 10 small images to be displayed horizontally and have each of these images fade in and out at random times and being replaced by other images.

I have a flash example that i would like to replicate that would give you an example of what i want to achieve. If you look at the bottom of the page where the platinum sponsors are this is what i want to replicate.

http://acerarena.com.au/

If anyone could give me some feedback i would be greatful.

Liam.

Replies(3)

Kevin B

Re: Getting multiple images to fade in and out randomly.

12 years ago

the easiest way to do it would be to have a set number of "sponsers" on each slate. for example, you'll have a ul with 5 list item(or how every many images you want across) and within each list item, you place images that will rotate in that div. Next, you have a setInterval that generates a random number between one and 5 to decide which list item to rotate the image on. to rotate the image, simply hide the current one and show the next one.

Check out this jsbin i just put together: http://jsbin.com/imuwa3/2

it uses divs, however, you could simply replace the divs with images, or anchor tags wrapping an image as long as it has the rotator-image class.

Edit: here's the code(i've only tested it in google chrome):

$(function(){
// time between image rotate
var delay = 2000;
// for each list item in
// the rotator ul,
// show a random image
$('#rotator > li').each(function(){
// save images in an array
var $imgArr = $(this).children();
// show a random image
$imgArr.eq(Math.floor(Math.random()*$imgArr.length)).show();
});
// run the changeImage function after every (delay) miliseconds
setInterval(function(){
changeImage();
},delay);
function changeImage(){
// save list items in an array
var $liArr = $('#rotator > li');
// select a random list item
var $currLi = $liArr.eq(Math.floor(Math.random()*$liArr.length));
// get the currently visible image
var $currImg = $('.rotator-image:visible', $currLi);
if ($currImg.next().length == 1) {
var $next = $currImg.next();
} else {
var $next = $('.rotator-image:first', $currLi);
}
$currImg.fadeOut();
$next.fadeIn();
}
});

Edit:

i made a blog post out of this:

http://www.tentonaxe.com/snippets/8/2010/jquery-multiple-image-rotator.html

-- Kevin

------------------------------------------------
http://www.tentonaxe.com - jQuery Snippets and Tutorials

brimmm

Re: Getting multiple images to fade in and out randomly.

11 years ago

Thanks kboudloche

Your example is almost exactly what I was looking for. I used it to make a 6x4 grid of images with one image fading out and being replaced by another fading in, one image at a time.

An additional question is how can I make it so all the images don't load at once when the page first loads? Is there a way to have the initial images fade in, instead of just suddenly appearing? Everything else is great.

theplasti..

Re: Getting multiple images to fade in and out randomly.

8 years ago

I see this thread is very old and the blog post is now not active but I am after the same thing. Is there any wordpress or jQuery plugin that offers this kind of functionality?

Top Reply

Response title

Attachments

jQuery Forum

Getting multiple images to fade in and out randomly.

Replies(3)

Re: Getting multiple images to fade in and out randomly.

Re: Getting multiple images to fade in and out randomly.

Re: Getting multiple images to fade in and out randomly.

Statistics

Tags

Actions