<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Slideshow.aspx.cs" Inherits="Slideshow" %>
<!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-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
LoadXmlToArray();
});
var LoadXmlToArray = function () {
var imgpath = new Array();
var tem = 0;
$.ajax({
type: "GET",
url: "XML1.xml",
cache: false,
dataType: "xml",
async: false,
success: function (xml) {
$(xml).find('Table', xml).each(function () {
tem++;
var $Table = $(this);
imgpath[tem] = $Table.find('imgpath').text();
});
var htmltag = "";
var flag = 0;
// flag++;
// htmltag = '<img class="fadeimg" src="' + imgpath[flag] + '" style="width:521px; opacity:1.0; height:359px" /></li>';
//
// $(".slide").html(htmltag);
// $(".slide").hover(function () {
// flag++;
// htmltag = '<img class="fadeimg" src="' + imgpath[flag] + '" style="width:521px; opacity:1.0; height:359px" /></li>';
// $(".slide").html(htmltag);
// $(".fadeimg").animate({ opacity: '1.0' }, 3000);
// $(".fadeimg").fadeOut(3000);
// if (flag >= imgpath.length - 1) {
// flag = 1;
// }
// });
var slide = setInterval(function () {
flag++;
htmltag = '<img class="fadeimg" src="' + imgpath[flag] + '" style="width:400px; opacity:0.1; height:300px" /></li>';
$(".slide").html(htmltag);
$(".fadeimg").animate({ opacity: '1.0' }, 2000);
$(".fadeimg").fadeOut(2000);
$(".fadeimg").hover(function () {
$(".fadeimg").css({ "width": "600px", "height": "550px" });
});
if (flag >= imgpath.length - 1) {
flag = 1;
}
}, 4000);
}
});
}
</script>
<style type="text/css">
.style1
{
font-family: Arial;
}
.fadeimg:hover
{
width: 500px;
height: 500px;
}
</style>
</head>
<body style="background-color: Green; font-family: Aharoni;">
<form id="form1" runat="server">
<div style="position: absolute; top: 31px; left: 383px; font-size: 50px; color: #FF0000;
width: 277px; height: 59px;">
<span class="style1"><strong><em>Slide Show</em></strong></span>
</div>
<div>
<div class="slide" style="position: absolute; top: 102px; left: 279px; height: 359px;
width: 521px;">
<%-- background-image : url('images/images.jpg')">--%>
</div>
</div>
</form>
</body>
</html>
No comments:
Post a Comment