Tuesday, April 6, 2010

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

Just try this,

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
     <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;}​
    <form id="form1" runat="server">
       <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"/>
    <script type="text/javascript">
        $(function() {
            $('#BannerDiv > :first').show();

        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();

Include your images to see the demo...