Make Simple Animation With JavaScript

Step 1, make a simple html file to show pictures.

<div class="container_slide_show">

       <img class="slide" src="images/kittens_01.jpg" alt="Kittens" />

       <p class="slide_description">Orange kitten</p>

 </div>

Step 2, prepare some pictures you want to display animatedly. For example, you can save kittens_02.jpg, kittens_03.jpg,kittens_04.jpg in the ./images directory.

Step 3, write script to animate the pictures:

var $slide = $('.slide');
var $slideDescription = $('.slide_description');
var kittenPics = [];
var imageCache = [];

kittenPics[0] = ['images/kittens_01.jpg', 'Orange kitten'];
kittenPics[1] = ['images/kittens_02.jpg', 'Brown striped kitten'];
kittenPics[2] = ['images/kittens_03.jpg', 'Three kittens'];
kittenPics[3] = ['images/kittens_04.jpg', 'Orange kitten on the grass'];

// Cache images
for(var i = 0; i < kittenPics.length; i++){
 var image = new Image;
 image.src = kittenPics[i][0];
 image.alt = kittenPics[i][1];
 imageCache.push(image); 
}

// Start slide show
var imageCounter = 0;
setInterval(changeSlide, 2000);

function changeSlide(){
    var icounter = imageCounter % imageCache.length;
    console.log("icounter = " + icounter);
    var image = imageCache[icounter];
    
    $slide.attr('src', image.src);
    $slide.attr('alt', image.alt);
    $slideDescription.text ( image.alt);
    imageCounter++;
}

Now, it works. The page will change a picture every 2,000ms. We can add more functions to it: stop animation when the mouse hover on it.

$slide.hover( function(ev){
    clearInterval(timer);
}, function(ev){
    timer = setInterval(changeSlide, 500);
});