0
这里先载入图像，然后再进行滑动图像。因为动态图像被放置在div中，所以div被载入。之后，图像被逐个粉化SlidePicture（）函数 当页面refershed我想siliding完成图像从文件夹路径中动态显示jquery中的图像
代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<style type="text/css">
body
{
margin: 0px;
padding: 0px;
}
#divSlideShow
{
position: absolute;
height: 500px;
padding: 30px 20px 60px 20px;
width: 1500px;
}
#divSlideShow IMG
{
position: absolute;
top: 0;
left: 0;
z-index: 8;
}
#divSlideShow IMG.active
{
z-index: 10;
}
#divSlideShow IMG.last-active
{
z-index: 9;
}
.ImageClass
{
padding: 50px 100px 50px 220px;
width: 600px;
height: 400px;
}
</style>
<script type="text/javascript">
function GetData()
{
var dynamicDiv = document.createElement('div');
dynamicDiv.setAttribute('Id', 'divSlideShow');
setTimeout("showIt()", 100000);
var fileNamesData = document.getElementById('hdnFileNames').value.split('‡');
for (var i = 0; i < fileNamesData.length - 1; i++)
{
var dynamicImg = document.createElement('img');
dynamicImg.setAttribute("src", "Images/" + fileNamesData[i]);
dynamicImg.setAttribute("class", "ImageClass");
// document.getElementById('divSlideShow').appendChild(dynamicImg);
dynamicDiv.appendChild(dynamicImg);
}
document.getElementById('form2').appendChild(dynamicDiv);
}
function showIt() {
document.getElementById("divSlideShow").style.visibility = "none";
}
$(function() {
setInterval("slidePictures()", 5000);
});
function slidePictures() {
var $active = $('#divSlideShow IMG.active');
//if ($active.length == 0) $active = $('#divSlideShow IMG:last');
var $next = $active.next().length ? $active.next() : $('#divSlideShow IMG:first');
$active.addClass('last-active');
$next.css({ opacity: 0.0 })
.addClass('active')
.animate({ opacity: 10.0 }, 1000, function() {
$active.removeClass('active last-active');
});
}
</script>
</head>
<body onload="GetData()">
<form id="form2" runat="server">
<label id="lblImage"></label>
<asp:HiddenField ID="hdnFileNames" runat="server" />
</form>
</body>
</html>
.cs:
----
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
namespace JquerySlideShow
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
var data="";
string[] fileName = Directory.GetFiles(@"D:\Experiments\Jquery\JquerySlideShow\JquerySlideShow\Images");//D:\Experiments\Jquery\JquerySlideShow\JquerySlideShow\Images
foreach (var path in fileName)
{
data += (System.IO.Path.GetFileName(path)+"‡");
}
hdnFileNames.Value = data;
}
}
}
Anyone help me.