📄 deckimgbydeckid.aspx
字号:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DeckImgByDeckId.aspx.cs" Inherits="DeckImgByDeckId" %>
<!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 type="text/javascript" src="../js/tree.js"></script>
</head>
<body onload="PreloadImage('<%= dClassId %>','<%= currentPage %>');">
<form id="form1" runat="server">
<div id="photoarea" style="width: 514px; height: 496px; left: 0px; top: 0px;">
<div id="photo" style="left: 5px; top: 9px; height: 432px; vertical-align:top;">
<img id="slideShow" src="../Photo/space.gif" style="filter:revealTrans(duration=2,transition=23); width:370pt; height:330pt;">
</div>
<div id="op" align="left" style="left: 12px; top: 457px; height:70pt;">
<ul style="list-style-type:none; text-align:center; margin-top:5pt;">
<li><label id="title"></label></li>
<li>
<span id="progress" style="font-size: 20px"></span>
<img id="btnPlay" src="../Photo/play_bw.gif">
<img id="btnPause" src="../Photo/pause_bw.gif">
<img id="btnPrev" src="../Photo/prev_bw.gif">
<img id="btnNext" src="../Photo/next_bw.gif">
</li>
</ul>
</div>
</div>
<script type="text/javascript" language="javascript">
var timeDelay;// 定时器
var timeInterval = 4000;//图片自动浏览时的时间间隔
var image;// Array对象,存储图片文件的路径
var num;// 当前显示的图片序号
var nStatus;//当前浏览状态,该状态用于控制4个按钮的状态
var slideShow = el("slideShow");//图片显示区域
var dt;//图片信息数据表
var newNum;
//预加载图片信息
function PreloadImage(dClassId,currentPage)
{
//采用同步调用的方式获取图片的信息
var ds = AjaxMethod.GetPhotoList(dClassId).value;
newNum = currentPage;
// 如果返回结果
if (ds)
{
// 判断数据表是否不为空
if (ds.Tables[0].Rows.length > 0)
{
// 返回的图片信息数据表
dt = ds.Tables[0];
// 用image对象存储图片的文件路径
image = new Array();
// 图片在Img目录下
for (var i = 0; i < dt.Rows.length; i++)
{
image.push("../Img/" + dt.Rows[i].ImgUrl);
}
// 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];
}
if(newNum>0)
{
num = newNum-2;
}
else
{
// 初始化一些变量
num = -1;
}
nStatus = 0x09;
slideshow_automatic()
//next_image();加载第一张图片
}
else // 分类下没有图片
{
alert("该目录下没有图片!");
}
}
}
// 实现图片切换时的效果
function image_effects()
{
// Transition的值为0~23之间的随机数,代表24种切换效果
// 具体值与效果之间的对应见MSDN
slideShow.filters.revealTrans.Transition = Math.random() * 23;
// 应用并播放切换效果
slideShow.filters.revealTrans.apply();
slideShow.filters.revealTrans.play();
}
// 切换到上一张图片
function previous_image()
{
// 图片序号向前移动,如果已经是第一张,则切换到最后一张
num += image.length - 1;
num %= image.length;
// 图片切换的效果
image_effects();
// 将<img>对象的src属性设置为当前num对应的路径
// 切换图片的显示
slideShow.src = image[num];
// 获取图片的标题、说明信息
getPhotoInfo();
// 设置按钮状态
setBtnStatus();
}
// 切换到下一张图片
function next_image()
{
// 当前图片的序号向后移动,如果已经是最后一张,
// 则切换到第一张图片
num++;
num %= image.length;
// 图片的切换效果
image_effects();
// 将<img>对象的src属性设置为当前num对应的路径
// 切换图片的显示
slideShow.src = image[num];
// 获取图片的标题、说明信息
getPhotoInfo();
// 设置按钮状态
setBtnStatus();
}
// 自动浏览图片
function slideshow_automatic()
{
// 当前图片的序号向后移动,如果已经是最后一张,
// 则切换到第一张图片
num++;
num %= image.length;
// 图片的切换效果
image_effects();
// <img>对象的src属性设置为当前num指定的URL
// 切换图片的显示
slideShow.src = image[num];
// 获取图片的标题、说明信息
getPhotoInfo();
// 设置按钮的状态,使播放按钮失效,暂停按钮有效
nStatus &= 0x0E;
nStatus |= 0x02;
setBtnStatus();
// slideshow_automatic函数每隔一段时间自动执行
timeDelay = setTimeout("slideshow_automatic()", timeInterval);
}
// 停止自动播放
function pauseSlideShow()
{
// 清除定时器,不再执行slideshow_automatic函数
clearTimeout(timeDelay);
// 设置按钮的状态,使播放按钮有效,暂停按钮失效
nStatus &= 0x0d;
nStatus |= 0x01;
setBtnStatus();
}
// 设置按钮的状态:
// 判断的依据是当前是否处于自动播放的状态
// 以及当前显示的图片是否第一张或最后一张图片
function setBtnStatus(bDir)
{
// 如果是第一张图片
if (num == 0)
{
// 向前切换图片的按钮失效
nStatus &= 0x0b;
}
// 如果是最后一张图片
if (num == (image.length - 1))
{
// 向后切换图片的按钮失效
nStatus &= 0x07;
}
// 如果既不是最后一张,也不是第一张图片
if (num != 0 && num !=(image.length - 1))
{
// 向前、向后切换图片的按钮均有效
nStatus |= 0x0c;
}
// 根据nStatus每一位的值确定4个按钮的背景图
el("btnPlay").src = ((nStatus & 0x01) == 0x01) ?
"../Photo/play.gif" : "../Photo/play_bw.gif";
el("btnPause").src = ((nStatus & 0x02) == 0x02) ?
"../Photo/pause.gif" : "../Photo/pause_bw.gif";
el("btnPrev").src = ((nStatus & 0x04) == 0x04) ?
"../Photo/prev.gif" : "../Photo/prev_bw.gif";
el("btnNext").src = ((nStatus & 0x08) == 0x08) ?
"../Photo/next.gif" : "../Photo/next_bw.gif";
// 根据nStatus每一位的值确定鼠标移动到4个按钮上方时的形状
el("btnPlay").style.cursor = ((nStatus & 0x01) == 0x01) ?
"pointer" : "default";
el("btnPause").style.cursor = ((nStatus & 0x02) == 0x02) ?
"pointer" : "default";
el("btnPrev").style.cursor = ((nStatus & 0x04) == 0x04) ?
"pointer" : "default";
el("btnNext").style.cursor = ((nStatus & 0x08) == 0x08) ?
"pointer" : "default";
// 根据nStatus的每一位确定4个按钮是否具有onclick响应
el("btnPlay").onclick = ((nStatus & 0x01) == 0x01) ?
function() {slideshow_automatic();} : function() {return false;};
el("btnPause").onclick = ((nStatus & 0x02) == 0x02) ?
function() {pauseSlideShow();} : function() {return false;};
el("btnPrev").onclick = ((nStatus & 0x04) == 0x04) ?
function() {previous_image();} : function() {return false;};
el("btnNext").onclick = ((nStatus & 0x08) == 0x08) ?
function() {next_image();} : function() {return false;};
// 显示当前图片浏览的进度
el("progress").innerHTML = (num + 1) + " / " + image.length;
}
// 获取图片的标题、说明信息
function getPhotoInfo()
{
// 图片ID号
var deckId = dt.Rows[num].DeckId;
var deckName = dt.Rows[num].DeckName;
//判断是为空
if (deckId!=""&&deckName!="")
{
el("title").innerHTML = "<a href='DeckDetailInfo.aspx?DeckId="+deckId+"' target='_top'>"+deckName+"</a>";
}
}
</script>
</form>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -