CODEWITHSUNDEEP
jquery
DG3
DG3

Reputation: 5298

jquery animate images

I have list of images. Is it possible to have all the ads randomly rotate in and out of those spots every 5 seconds

<div id="s1" class="pics">

<img src="http://placekitten.com/200/200">
<img src="http://placekitten.com/150/150">
<img src="http://placekitten.com/180/180">
<img src="http://placekitten.com/170/170">
<img src="http://placekitten.com/140/140">
<img src="http://placekitten.com/160/160">

</div>


$(document).ready(function(){

    var numberOfImages;
    $(".pics img").each(function(){
        numberOfImages = $(".pics img").size();
        //alert(numberOfImages);
    });


});

Really not sure how to do this. can anyone point me in the right direction?

Upvotes: 0

Views: 1432

Answers (2)

Topher Fangio
Topher Fangio

Reputation: 20667

I would store the image sources in an array and then iterate over the array. Something like this:

var myImages = [
    "http://placekitten.com/200/200",
    "http://placekitten.com/150/150",
    "http://placekitten.com/180/180",
    "http://placekitten.com/170/170",
    "http://placekitten.com/140/150",
    "http://placekitten.com/160/160"
];
var counter = 1;  // Start at number 2 since the HTML tag has the first

function switchImage() {
    $('#myImage').attr('src', myImages[counter]);
    counter += 1;

    if (counter == myImages.length) {
        counter = 0;
    }
}

$(document).ready(function() {
    setInterval(switchImage, 5000);
});

Then, in your HTML:

 <img id='myImage' src='http://placekitten.com/200/200' />

Or you could just search Google for "jQuery cycle". Personally, I like the Nivo Slider.

Upvotes: 2

Jason McCreary
Jason McCreary

Reputation: 72961

Check out the jQuery Cycle Plugin. It has a random option that does exactly what you describe.

Upvotes: 1

Related Questions