<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication2.Account.WebForm2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
#slideshow {
margin: 30px auto;
position: relative;
width: 640px;
height: 480px;
padding: 5px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow > div {
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$("#slideshow > div:gt(0)").hide();
setInterval(function () {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="slideshow">
<div>
<img src="../Images/1.jpg" />
</div>
<div>
<img src="../Images/2.jpg" />
</div>
<div>
<img src="../Images/3.jpg" />
</div>
<div>
<img src="../Images/4.jpg" />
</div>
</div>
</form>
</body>
</html>
Simple jQuery Slideshow
