Tuesday, April 6, 2010

Jquery replaces Flash... Really cool....

Just try this,


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script type="text/javascript" src="jquery.js"></script>
     <link rel="Stylesheet" type="text/css" href="CSS/Main.css" />
     <style type="text/css>
   #BannerDiv {width: 954px; height: 327px;}
   #BannerDiv img {position: absolute; width: 954px; height: 327px; display: none;}​
     </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <div Id="BannerDiv">
            <img src="Images/banner3.jpg" alt="image1"/>
            <img src="Images/ban_main_25.jpg" alt="image2"/>
            <img src="Images/banner_25.jpg" alt="image3"/>
        </div>
    </div>
    <script type="text/javascript">
        $(function() {
            $('#BannerDiv > :first').show();
            setTimeout(rotate,1000);
        });

        function rotate() {
            var c = $('#BannerDiv > :visible').css({ 'z-index': 2 }).fadeOut(2000, function() {
                setTimeout(rotate, 1000);
            }).next().css({ 'z-index': 1 }).show();
            if (c.length == 0) $('#BannerDiv > :first').css({ 'z-index': 1 }).show();
        }
     </script>
    </form>
</body>
</html>

Include your images to see the demo...