Skip to main content

A simple jQuery slideshow

I have used jQuery animate() method to create a simple slideshow. I am toggling the opacity of the image from 0 to 1 and also changing the URL of the image.

Script:

 function AnimateImg()  
 {  
   var imgUrls = new Array("picture1.png", "picture2.png", " picture3.png ");  
   var opacVal = 0;  
   var currentImage = imgUrls[0];  
   var index = 0;  
   var DELAY = 1000;  
   setInterval(function()  
       {  
       $("#animate-img").animate({ opacity: opacVal }, DELAY, function() {  
           if (opacVal == 0) {  
             opacVal = 1;  
           }  
           else {  
             opacVal = 0;  
           }  
           if (index == imgUrls.length) {  
             index = 0;  
           }  
           if (opacVal == 0) {  
             currentImage = imgUrls[index++];  
             $("#animate-img").attr("src", currentImage);  
           }  
         });  
       }, DELAY  
     );  
 }  
HTML:



<image id="animate-img" src="" style="height:200px"/>

DEMO:

Also check the jquery modal dialog here.

Comments