Dec 19, 2011

A simple jQuery slideshow

Dec 19, 2011

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:

<script type="text/javascript">
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
       );
}
</script>
HTML:


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

DEMO:

Also check the jquery modal dialog here.

0 comments:

Post a Comment

Top Ad 728x90