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