Dec 19, 2011

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

<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.

No comments:

Post a Comment