Image slide show using JQuery

Sunday, November 15, 2009

Image slide show using JQuery

In this article I am going to explain, how we can use JQuery for preparing a slid show using various images. You can download JQuery from the following link.

Download JQuery

Below is the aspx page content

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Image slide show</title>
    <script type='text/javascript'
        src="JQuery/jquery-1.3.2.min.js">
    </script>
  
    <script type="text/javascript">
        $(function() {
            var img = $("img.imgclass");           
            $(img).hide().eq(0).show();
            var cnt = img.length;

            setInterval(imgRotate, 5000);

            function imgRotate() {
               $(img).eq((img.length++) % cnt).fadeOut("slow", function() {
                    $(img).eq((img.length) % cnt)
                    .fadeIn("slow");
                });
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
            <img src="Images/1.jpg" class="imgclass" alt="Image1"/>
            <img src="Images/10.jpg" class="imgclass" alt="Image2"/>
            <img src="Images/11.jpg" class="imgclass" alt="Image3"/>
    </form>
</body>
</html>

In the code what I am doing is straight forward. Get all img tags with class “imgclass”. Hide them initially. Every 5 second, call the method “imgRotate”. This method will fadeout the previous image and fade in the current image. Inside the form tag, you can add as many images you needed.

Hope this was helpful thumbs_up