<!-- 相片控制脚本 -->
<script language="javascript" type="text/javascript">
// 添加类别树根节点
var treeCate = getById("TreeCategory");
// 初始化用户ID
var UserID = <%= Session["UserID"].ToString() %>;
// 根据Session来判断用户是否登录,如登录则获取用户登录ID if(UserID == null)
{
document.getElementById("title").innerHTML="您还未登录,登录后才能显示您的照片";
}
else
{
ExpandTree(0);
}
// 初始化树,顶级节点的父节点为0
// 展开节点
// CateID节点ID
function ExpandTree(CateID)
{
// 获取当前节点所在DIV
var node = getById("open_node" + CateID);
if (node == null)
{
node = treeCate;
}
// 判断当前节点是否已加载
if (node.getElementsByTagName("div").length > 0)
{
return;
}
// 添加临时节点,显示提示信息
createTmpNode(node, "请稍候...");
// 向服务端发送请,并将返回数据返回给GetSubCategorys_callback函数
test4.GetSubCategorys(CateID, UserID, GetSubCategorys_callback);
}
// 返回处理函数
// returnTable返回数据对象
function GetSubCategorys_callback(returnTable)
{
// 取得返回的数据表
var table = returnTable.value.Tables[0];
// 判断返回数据是否为空
if (table.Rows.length > 0)
{
// 获取用户单击类别ID
var intCateID = table.Rows[0].ParentCateID;
}
// 判断对象是否存在
var node_parent = getById("open_node" + intCateID);
if (node_parent == null) node_parent = treeCate;
// 遍历所有数据并加载到树节点下
for (var i = 0;i < table.Rows.length;i++)
{
// 判断节点是否包含子节点
if (table.Rows[i].haveChild == 1)
{
// 不包含子节点
createEmptyNode(node_parent, table.Rows[i].CateID, table.Rows[i].CateName);
}
else
{
// 包含子节点
createNode(node_parent, table.Rows[i].CateID, table.Rows[i].CateName, "展开/折叠");
}
}
// 移除临时节点
moveTmpNode(node_parent);
// 如果返回数据为空
if (table.Rows.length == 0)
{
// 显示未登录或没数据的提示信息
createTmpNode(node_parent, "未登录或没类别数据");
}
}
// 节点单击响应函数
function OpenDocument(CateID)
{
// 加载相片函数
LoadPhoto(CateID);
}
// 定时器
var timeer;
// 图片自动浏览时的时间间隔
var timeInterval = 2000;
// Array对象,存储图片文件的路径
var image;
// 当前显示的图片序号
var num;
// 当前浏览状态,该状态用于控制2个按钮的状态
var btStatus;
var btnPlay = 2;
// 图片显示区域
var PhotoShow = getById("PhotoShow");
// 图片信息数据表
var dtPhoto;
// 加载相片数据
// CateID 相片所在类别ID
function LoadPhoto(CateID)
{
// 应用Ajax同步调用服务端Ajax方法取得相片数据
var dsPhoto = test4.GetSubPhotos(CateID, UserID).value;
// 如果返回了结果
if (dsPhoto)
{
// 判断数据表是否不为空
if (dsPhoto.Tables[0].Rows.length > 0)
{
// 返回的相片信息数据表
dtPhoto = dsPhoto.Tables[0];
// 用image对象存储相片的文件路径
image = new Array();
// 图片在Photos目录下
for (var i = 0; i < dtPhoto.Rows.length; i++)
{
image.push("Photos/" + dtPhoto.Rows[i].PhotoFileName);
}
// imagePreload对象用于实现相片的预缓存
var imagePreload = new Array();
for (var i = 0;i < image.length;i++)
{
// 通过新建Image对象,并将其src属性指向相片的URL
// 显现相片的预缓存
imagePreload[i] = new Image();
imagePreload[i].src = image[i];
} // 初始化变量
num = -1;
btStatus = 0;
// 加载第一张相片
next_Image();
}
// 分类下没有图片
else
{
alert("该目录下没有相片!");
}
}
}
// 切换到下一张相片
function next_Image()
{
// 当前相片的序号向后移动,如果已经是最后一张,
// 则切换到第一张相片
num++;
num %= image.length;
// 相片的切换效果
image_Effects();
// 将<img>对象的src属性设置为当前num对应的路径
// 切换相片的显示
PhotoShow.src = image[num];
// 获取相片的标题、说明信息
GetPhotoInfo();
// 设置按钮状态
setBtn();
}
// 切换到上一张相片
function prev_Image()
{
// 相片序号向前移动,如果已经是第一张,则切换到最后一张
num += image.length - 1;
num %= image.length;
// 相片切换的效果
image_Effects();
// 将<img>对象的src属性设置为当前num对应的路径
// 切换相片的显示
PhotoShow.src = image[num];
// 获取相片的标题、说明信息
GetPhotoInfo();
// 设置按钮状态
setBtn();
}
// 实现图片切换时的效果
function image_Effects()
{
// Transition的值为0~23之间的随机数,代表24种切换效果
// 具体值与效果之间的对应见MSDN
PhotoShow.filters.revealTrans.Transition = Math.random() * 23;
// 应用并播放切换效果
PhotoShow.filters.revealTrans.apply();
PhotoShow.filters.revealTrans.play();
}
// 获取图片的标题、说明信息
function GetPhotoInfo()
{
debugger;
// 图片ID号
var photoID =dtPhoto.Rows[num].PhotoID;
//var photoID = dtPhoto.Rows[num][0];
// 如果存在
if (photoID != null)
{
// 异步调用Ajax方法GetPhotoInfo
test4.GetPhotoInfo(photoID, GetPhotoInfo_CallBack);
}
}
// 回调函数,根据响应的内容显示相片标题和说明信息
function GetPhotoInfo_CallBack(retTable)
{
// 获取相片的信息
var tbPhoto = retTable.value.Tables[0];
// 如果相片存在
if (tbPhoto.Rows.length > 0)
{
// 显示相片的标题和说明
var ztfs=tbPhoto.Rows[0]["PhotoTitle"];
document.getElementById("title").innerHTML= tbPhoto.Rows[0]["PhotoTitle"];
document.getElementById("PhotoDesc").innerHTML= tbPhoto.Rows[0]["PhotoDesc"];
// getById("title").innerHTML = tbPhoto.Rows[0].PhotoTitle;
// getById("PhotoDesc").innerHTML = tbPhoto.Rows[0].PhotoDesc;
}
}
// 自动浏览相片
function auto_Show()
{
// 当前相片的序号向后移动,如果已经是最后一张,
// 则切换到第一张相片
num++;
num %= image.length;
// 相片的切换效果
image_Effects();
// <img>对象的src属性设置为当前num指定的URL
// 切换相片的显示
PhotoShow.src = image[num];
// 获取相片的标题、说明信息
GetPhotoInfo();
// 设置按钮的状态,使播放按钮失效,暂停按钮有效
btnPlay = 1;
setBtn();
// auto_Show函数每隔一段时间自动执行
timeDelay = setTimeout("auto_Show()", timeInterval);
}
// 停止自动播放
function pause_Show()
{
// 清除定时器,不再执行slideshow_automatic函数
clearTimeout(timeDelay); // 设置按钮的状态,使播放按钮有效,暂停按钮失效
btnPlay = 2;
setBtn();
}
// 设置按钮的状态:
// 判断的依据是当前是否处于自动播放的状态
// 以及当前显示的相片是否第一张或最后一张相片
function setBtn(bDir)
{
// 如果是第一张相片
if (num == 0)
{
// 向前切换相片的按钮失效
btStatus = 3;
}
// 如果是最后一张相片
if (num == (image.length - 1))
{
// 向后切换图片的按钮失效
btStatus = 4;
}
// 如果既不是最后一张,也不是第一张相片
if (num != 0 && num !=(image.length - 1))
{
// 向前、向后切换相片的按钮均有效
btStatus = 5;
}
// 根据nStatus每一位的值确定4个按钮的背景图
getById("btnPlay").src = (btnPlay == 2) ?
"images/play.gif" : "images/play_btn.gif";
getById("btnPause").src = (btnPlay == 1) ?
"images/pause.gif" : "images/pause_btn.gif";
getById("btnPrev").src = (btStatus == 5 || btStatus == 4) ?
"images/prev.gif" : "images/prev_btn.gif";
getById("btnNext").src = (btStatus == 5 || btStatus == 3) ?
"images/next.gif" : "images/next_btn.gif";
// 根据nStatus的每一位确定4个按钮是否具有onclick响应
getById("btnPlay").onclick = (btnPlay == 2) ?
function() {auto_Show();} : function() {return false;};
getById("btnPause").onclick = (btnPlay == 1) ?
function() {pause_Show();} : function() {return false;};
getById("btnPrev").onclick = (btStatus == 5 || btStatus == 4) ?
function() {prev_Image();} : function() {return false;};
getById("btnNext").onclick = (btStatus == 5 || btStatus == 3) ?
function() {next_Image();} : function() {return false;};
// 显示当前相片浏览的进度
getById("PhotoNum").innerHTML = (num + 1) + " / " + image.length;
}
</script>
<script language="javascript" type="text/javascript">
// 添加类别树根节点
var treeCate = getById("TreeCategory");
// 初始化用户ID
var UserID = <%= Session["UserID"].ToString() %>;
// 根据Session来判断用户是否登录,如登录则获取用户登录ID if(UserID == null)
{
document.getElementById("title").innerHTML="您还未登录,登录后才能显示您的照片";
}
else
{
ExpandTree(0);
}
// 初始化树,顶级节点的父节点为0
// 展开节点
// CateID节点ID
function ExpandTree(CateID)
{
// 获取当前节点所在DIV
var node = getById("open_node" + CateID);
if (node == null)
{
node = treeCate;
}
// 判断当前节点是否已加载
if (node.getElementsByTagName("div").length > 0)
{
return;
}
// 添加临时节点,显示提示信息
createTmpNode(node, "请稍候...");
// 向服务端发送请,并将返回数据返回给GetSubCategorys_callback函数
test4.GetSubCategorys(CateID, UserID, GetSubCategorys_callback);
}
// 返回处理函数
// returnTable返回数据对象
function GetSubCategorys_callback(returnTable)
{
// 取得返回的数据表
var table = returnTable.value.Tables[0];
// 判断返回数据是否为空
if (table.Rows.length > 0)
{
// 获取用户单击类别ID
var intCateID = table.Rows[0].ParentCateID;
}
// 判断对象是否存在
var node_parent = getById("open_node" + intCateID);
if (node_parent == null) node_parent = treeCate;
// 遍历所有数据并加载到树节点下
for (var i = 0;i < table.Rows.length;i++)
{
// 判断节点是否包含子节点
if (table.Rows[i].haveChild == 1)
{
// 不包含子节点
createEmptyNode(node_parent, table.Rows[i].CateID, table.Rows[i].CateName);
}
else
{
// 包含子节点
createNode(node_parent, table.Rows[i].CateID, table.Rows[i].CateName, "展开/折叠");
}
}
// 移除临时节点
moveTmpNode(node_parent);
// 如果返回数据为空
if (table.Rows.length == 0)
{
// 显示未登录或没数据的提示信息
createTmpNode(node_parent, "未登录或没类别数据");
}
}
// 节点单击响应函数
function OpenDocument(CateID)
{
// 加载相片函数
LoadPhoto(CateID);
}
// 定时器
var timeer;
// 图片自动浏览时的时间间隔
var timeInterval = 2000;
// Array对象,存储图片文件的路径
var image;
// 当前显示的图片序号
var num;
// 当前浏览状态,该状态用于控制2个按钮的状态
var btStatus;
var btnPlay = 2;
// 图片显示区域
var PhotoShow = getById("PhotoShow");
// 图片信息数据表
var dtPhoto;
// 加载相片数据
// CateID 相片所在类别ID
function LoadPhoto(CateID)
{
// 应用Ajax同步调用服务端Ajax方法取得相片数据
var dsPhoto = test4.GetSubPhotos(CateID, UserID).value;
// 如果返回了结果
if (dsPhoto)
{
// 判断数据表是否不为空
if (dsPhoto.Tables[0].Rows.length > 0)
{
// 返回的相片信息数据表
dtPhoto = dsPhoto.Tables[0];
// 用image对象存储相片的文件路径
image = new Array();
// 图片在Photos目录下
for (var i = 0; i < dtPhoto.Rows.length; i++)
{
image.push("Photos/" + dtPhoto.Rows[i].PhotoFileName);
}
// imagePreload对象用于实现相片的预缓存
var imagePreload = new Array();
for (var i = 0;i < image.length;i++)
{
// 通过新建Image对象,并将其src属性指向相片的URL
// 显现相片的预缓存
imagePreload[i] = new Image();
imagePreload[i].src = image[i];
} // 初始化变量
num = -1;
btStatus = 0;
// 加载第一张相片
next_Image();
}
// 分类下没有图片
else
{
alert("该目录下没有相片!");
}
}
}
// 切换到下一张相片
function next_Image()
{
// 当前相片的序号向后移动,如果已经是最后一张,
// 则切换到第一张相片
num++;
num %= image.length;
// 相片的切换效果
image_Effects();
// 将<img>对象的src属性设置为当前num对应的路径
// 切换相片的显示
PhotoShow.src = image[num];
// 获取相片的标题、说明信息
GetPhotoInfo();
// 设置按钮状态
setBtn();
}
// 切换到上一张相片
function prev_Image()
{
// 相片序号向前移动,如果已经是第一张,则切换到最后一张
num += image.length - 1;
num %= image.length;
// 相片切换的效果
image_Effects();
// 将<img>对象的src属性设置为当前num对应的路径
// 切换相片的显示
PhotoShow.src = image[num];
// 获取相片的标题、说明信息
GetPhotoInfo();
// 设置按钮状态
setBtn();
}
// 实现图片切换时的效果
function image_Effects()
{
// Transition的值为0~23之间的随机数,代表24种切换效果
// 具体值与效果之间的对应见MSDN
PhotoShow.filters.revealTrans.Transition = Math.random() * 23;
// 应用并播放切换效果
PhotoShow.filters.revealTrans.apply();
PhotoShow.filters.revealTrans.play();
}
// 获取图片的标题、说明信息
function GetPhotoInfo()
{
debugger;
// 图片ID号
var photoID =dtPhoto.Rows[num].PhotoID;
//var photoID = dtPhoto.Rows[num][0];
// 如果存在
if (photoID != null)
{
// 异步调用Ajax方法GetPhotoInfo
test4.GetPhotoInfo(photoID, GetPhotoInfo_CallBack);
}
}
// 回调函数,根据响应的内容显示相片标题和说明信息
function GetPhotoInfo_CallBack(retTable)
{
// 获取相片的信息
var tbPhoto = retTable.value.Tables[0];
// 如果相片存在
if (tbPhoto.Rows.length > 0)
{
// 显示相片的标题和说明
var ztfs=tbPhoto.Rows[0]["PhotoTitle"];
document.getElementById("title").innerHTML= tbPhoto.Rows[0]["PhotoTitle"];
document.getElementById("PhotoDesc").innerHTML= tbPhoto.Rows[0]["PhotoDesc"];
// getById("title").innerHTML = tbPhoto.Rows[0].PhotoTitle;
// getById("PhotoDesc").innerHTML = tbPhoto.Rows[0].PhotoDesc;
}
}
// 自动浏览相片
function auto_Show()
{
// 当前相片的序号向后移动,如果已经是最后一张,
// 则切换到第一张相片
num++;
num %= image.length;
// 相片的切换效果
image_Effects();
// <img>对象的src属性设置为当前num指定的URL
// 切换相片的显示
PhotoShow.src = image[num];
// 获取相片的标题、说明信息
GetPhotoInfo();
// 设置按钮的状态,使播放按钮失效,暂停按钮有效
btnPlay = 1;
setBtn();
// auto_Show函数每隔一段时间自动执行
timeDelay = setTimeout("auto_Show()", timeInterval);
}
// 停止自动播放
function pause_Show()
{
// 清除定时器,不再执行slideshow_automatic函数
clearTimeout(timeDelay); // 设置按钮的状态,使播放按钮有效,暂停按钮失效
btnPlay = 2;
setBtn();
}
// 设置按钮的状态:
// 判断的依据是当前是否处于自动播放的状态
// 以及当前显示的相片是否第一张或最后一张相片
function setBtn(bDir)
{
// 如果是第一张相片
if (num == 0)
{
// 向前切换相片的按钮失效
btStatus = 3;
}
// 如果是最后一张相片
if (num == (image.length - 1))
{
// 向后切换图片的按钮失效
btStatus = 4;
}
// 如果既不是最后一张,也不是第一张相片
if (num != 0 && num !=(image.length - 1))
{
// 向前、向后切换相片的按钮均有效
btStatus = 5;
}
// 根据nStatus每一位的值确定4个按钮的背景图
getById("btnPlay").src = (btnPlay == 2) ?
"images/play.gif" : "images/play_btn.gif";
getById("btnPause").src = (btnPlay == 1) ?
"images/pause.gif" : "images/pause_btn.gif";
getById("btnPrev").src = (btStatus == 5 || btStatus == 4) ?
"images/prev.gif" : "images/prev_btn.gif";
getById("btnNext").src = (btStatus == 5 || btStatus == 3) ?
"images/next.gif" : "images/next_btn.gif";
// 根据nStatus的每一位确定4个按钮是否具有onclick响应
getById("btnPlay").onclick = (btnPlay == 2) ?
function() {auto_Show();} : function() {return false;};
getById("btnPause").onclick = (btnPlay == 1) ?
function() {pause_Show();} : function() {return false;};
getById("btnPrev").onclick = (btStatus == 5 || btStatus == 4) ?
function() {prev_Image();} : function() {return false;};
getById("btnNext").onclick = (btStatus == 5 || btStatus == 3) ?
function() {next_Image();} : function() {return false;};
// 显示当前相片浏览的进度
getById("PhotoNum").innerHTML = (num + 1) + " / " + image.length;
}
</script>
解决方案 »
- 浮点数计算问题
- 点击单选按钮弹出登录框问题
- responseXML的菜鸟问题
- 文本框input 设置属性 readonly 按Backspace时会返回上一页
- 有关框架链接的问题,,大哥们进来看一下。
- 我想要的是当radio没有选择的时候,弹出请选择的对话框~!!
- 请问如何实现 当用户关闭浏览器窗口时自动打开一个新的页面 功能?
- 如何写这个脚本!很简单但我写不来!
- 怎样才能使页面自动刷新并提交,但不会弹出“重试”“取消”的对话框
- 有誰知道如何讀取網頁中TextBox中的當前光標位置..急(100分相送)
- 哪位高手能帮我看看这段程序,关于折叠菜单的。
- Green Browser 脚本收集器顺序执行问题
取不到值,请大家帮我找下原因,谢谢
随便试试去掉debugger;
输出GetPhotoInfo() 里的Num 值看看是否正确
{
// 图片ID号
var photoID =dtPhoto.Rows[num].PhotoID;
// 如果存在
if (photoID != null)
{
document.getElementById("title").innerHTML= dtPhoto.Rows[num].PhotoTitle;
document.getElementById("PhotoDesc").innerHTML= dtPhoto.Rows[num].PhotoDesc;
// 异步调用Ajax方法GetPhotoInfo
//test4.GetPhotoInfo(photoID, GetPhotoInfo_CallBack);
}
}
这里不再callback,但是我就搞不懂了,难道不能在一次callback脚本函数中再对服务端再请求下数据?
但是事实上GetPhotoInfo_CallBack(retable)就一直没有启动过
再出50分寻求解释ajax的callback机制