How to make ImageRotator with JQUERY in ASP.Net
Here I am writing a simple Jquery Code that is in Bold lettters.
Code
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Main.master.cs" Inherits="Main" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// create the image rotator
setInterval("rotateImages()", 2000);
});
function rotateImages() {
var oCurPhoto = $('#photoShow div.current');
var oNxtPhoto = oCurPhoto.next();
if (oNxtPhoto.length == 0)
oNxtPhoto = $('#photoShow div:first');
oCurPhoto.removeClass('current').addClass('previous');
oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000,
function () {
oCurPhoto.removeClass('previous');
});
}
</script>
<style type="text/css">
#photoShow {
position: absolute;
height: 200%;
width: 800px;
margin: -100px 0 0 -200px;
top: 32%;
left: 32%;
}
#photoShow div {
position:absolute;
z-index: 0;
}
#photoShow div.previous {
z-index: 1;
}
#photoShow div.current {
z-index: 2;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="photoShow" align="center">
<div align="center">
<asp:Image ID="imgrotat1" ImageUrl="~/Images/1.png" runat="server" />
</div>
<div>
<asp:Image ID="imgrotat2" ImageUrl="~/Images/2.png" runat="server" />
</div>
<div>
<asp:Image ID="imgrotat3" ImageUrl="~/Images/3.png" runat="server" />
</div>
<div>
<asp:Image ID="imgrotat4" ImageUrl="~/Images/4.png" runat="server" />
</div>
<div>
<asp:Image ID="imgrotat5" ImageUrl="~/Images/5.png" runat="server" />
</div>
</div>
</div>
</form>
</body>
</html>
C# create image slide view with rotating animation
ReplyDelete