Html 源码
<% ... @ Page language="c#" Codebehind="ajaxImage.aspx.cs" AutoEventWireup="false" Inherits="ajaxImage" %>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< title > ajaxImage </ title >
< meta content ="Microsoft Visual Studio .NET 7.1" name ="GENERATOR" >
< meta content ="C#" name ="CODE_LANGUAGE" >
< meta content ="JavaScript" name ="vs_defaultClientScript" >
< meta content ="http://schemas.microsoft.com/intellisense/ie5" name ="vs_targetSchema" >
< Meta http-equiv ="Page-Enter" Content ="revealTrans(duration=0.3, transition=19)" >
< link href ="../../../images/zj258.css`" rel ="stylesheet" type ="text/css" >
< style type ="text/css" > ... a:link {...}{text-decoration: none;color: #000000;}
a:visited {...}{ text-decoration: none; color: #999999;}
a:hover {...}{ text-decoration: underline; color: #0066CC;}
a:active {...}{ text-decoration: none; color: #0066CC;}
.12-22 {...}{font-size: 12px; line-height: 22px;}
</ style >
< script language ="javascript" type ="text/javascript" > ...
// 定时器
var timeDelay;
// 图片自动浏览时的时间间隔
var timeInterval = 10*1000;
// Array对象,存储图片文件的路径
var image;
//phototitle对象,存储图片的标题
var phototitle;
// 当前显示的图片序号
var num;
//当前显示的图片的p_id
var p_id;
// 图片信息数据表
var dt;
// 预加载图片信息
function PreloadImage()
...{
// 采用同步调用的方式获取图片的信息 AjaxMethod
var ds = lib.AjaxMethod.GetPhotoList().value;
// 如果返回了结果
if (ds)
...{
// 判断数据表是否不为空
if (ds.Tables[0].Rows.length > 0)
...{
// 返回的图片信息数据表
dt = ds.Tables[0];
// 用image对象存储图片的文件路径
image = new Array();
//用phototitle对象存储图片的标题
phototitle=new Array();
//用p_id对象存储图片的p_id
p_id=new Array();
// 图片在Photos目录下
for (var i = 0; i < dt.Rows.length; i++)
...{
var strPath=dt.Rows[i].p_images;
var strName=dt.Rows[i].p_name;
//var num=str.indexOf("~");
image[i] ="http://www.fzbj.net"+strPath.substr(1);//截取“~”后面的参数串
phototitle[i]=strName;
p_id[i]=dt.Rows[i].p_id;
}
// 初始化一些变量
num = -1;
//nStatus = 0x09;
// 加载第一张图片
next_image();
}
else // 分类下没有图片
...{
alert("该目录下没有图片！");
}
}
}
// 实现图片切换时的效果
function image_effects()
...{
// Transition的值为0~23之间的随机数,代表24种切换效果
// 具体值与效果之间的对应见MSDN
var ran=Math.random() * 23;
document.slideShow1.filters.revealTrans.Transition =ran;
document.slideShow2.filters.revealTrans.Transition =ran;
document.slideShow3.filters.revealTrans.Transition =ran;
document.slideShow4.filters.revealTrans.Transition =ran;
// 应用并播放切换效果slideShow
document.slideShow1.filters.revealTrans.apply();
document.slideShow2.filters.revealTrans.apply();
document.slideShow3.filters.revealTrans.apply();
document.slideShow4.filters.revealTrans.apply();
document.slideShow1.filters.revealTrans.play();
document.slideShow2.filters.revealTrans.play();
document.slideShow3.filters.revealTrans.play();
document.slideShow4.filters.revealTrans.play();
}
function next_image()
...{
// 当前图片的序号向后移动,如果已经是最后一张,
// 则切换到第一张图片
num++;
num %= image.length;
// 图片的切换效果
image_effects();
// 将<img>对象的src属性设置为当前num对应的路径
// 切换图片的显示和标题
try
...{
document.slideShow1.src = image[num++];
document.getElementById("a1").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";
document.slideShow1.title=phototitle[num];
document.getElementById("srctext1").title=phototitle[num];
document.getElementById("srctext1").innerText=phototitle[num].substring(0,7);
document.getElementById("srctext1").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";
document.slideShow2.src = image[num++];
document.getElementById("a2").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";
document.slideShow2.title=phototitle[num];
document.getElementById("srctext2").title=phototitle[num];
document.getElementById("srctext2").innerText=phototitle[num].substring(0,7);
document.getElementById("srctext2").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";
document.slideShow3.src = image[num++];
document.getElementById("a3").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";
document.slideShow3.title=phototitle[num];
document.getElementById("srctext3").title=phototitle[num];
document.getElementById("srctext3").innerText=phototitle[num].substring(0,7);
document.getElementById("srctext3").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";
document.slideShow4.src = image[num++];
document.getElementById("a4").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";
document.slideShow4.title=phototitle[num];
document.getElementById("srctext4").title=phototitle[num];
document.getElementById("srctext4").innerText=phototitle[num].substring(0,7);
document.getElementById("srctext4").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";
}
catch(e)
...{
}
//谁时间自动播放
timeDelay = setTimeout( "next_image()",timeInterval );
}
function slideshow_automatic()
...{
// 当前图片的序号向后移动,如果已经是最后一张,
// 则切换到第一张图片
num ++;
num %= image.length;
// 图片的切换效果
image_effects();
// 将<img>对象的src属性设置为当前num对应的路径
// 切换图片的显示和标题
document.slideShow.src = image[num];
document.getElementById("srctext1").innerText=phototitle[num];
}
</ script >
</ HEAD >
< body onload ="PreloadImage()" topMargin ="0" >
< form id ="Form1" method ="post" runat ="server" >
< TABLE id ="Table1" class ="12-22" cellSpacing ="0" cellPadding ="0" border ="0" >
< TR >
< TD >
< a id ="a1" name ="a1" target =_blank >< IMG class ="line-black" style ="FILTER: revealTrans(duration=2,transition=23)" id ="slideShow1"
width ="100" border ="0" name ="slideShow1" height ="120" src ="http://www.fzbj.net/upfile/enterprise/proimage/2006824/200682492055289_thumb.jpg" ></ a >
</ TD >
< TD width ="38" >< FONT face ="宋体" ></ FONT ></ TD >
< TD >
< a id ="a2" name ="a2" target =_blank >< IMG class ="line-black" id ="slideShow2" style ="FILTER: revealTrans(duration=2,transition=23)"
width ="100" border ="0" name ="slideShow2" height ="120" src ="http://www.fzbj.net/upfile/enterprise/proimage/2006926/200692615551250_thumb.jpg" ></ a >
</ TD >
</ TR >
< TR class ="12-22" >
< TD align ="center" >< FONT face ="宋体" ></ FONT >< A id ="srctext1" target =_blank ></ A ></ TD >
< TD width ="38" >< FONT face ="宋体" ></ FONT ></ TD >
< TD align ="center" >< FONT face ="宋体" ></ FONT >< FONT face ="宋体" ></ FONT > < A id ="srctext2" target =_blank >
</ A >
</ TD >
</ TR >
< TR class ="12-22" >
< TD >
< a id ="a3" name ="a3" target =_blank >< IMG class ="line-black" style ="FILTER: revealTrans(duration=2,transition=23)" id ="slideShow3"
width ="100" border ="0" name ="slideShow3" height ="120" src ="http://www.fzbj.net/upfile/enterprise/proimage/200691/200691173436571_thumb.jpg" >
</ a >
</ TD >
< TD width ="38" >< FONT face ="宋体" ></ FONT ></ TD >
< TD >
< a id ="a4" name ="a4" target =_blank >< IMG class ="line-black" style ="FILTER: revealTrans(duration=2,transition=23)" id ="slideShow4"
width ="100" border ="0" name ="slideShow4" height ="120" src ="http://www.fzbj.net/upfile/enterprise/proimage/200691/200691172430774_thumb.jpg" >
</ a >
</ TD >
</ TR >
< TR class ="12-22" >
< TD align ="center" >< FONT face ="宋体" ></ FONT >< FONT face ="宋体" ></ FONT > < A id ="srctext3" target =_blank >
</ A >
</ TD >
< TD width ="38" >< FONT face ="宋体" ></ FONT ></ TD >
< TD align ="center" >< FONT face ="宋体" ></ FONT >< FONT face ="宋体" ></ FONT > < a id ="srctext4" target =_blank >
</ a >
</ TD >
</ TR >
</ TABLE >
</ form >
</ body >
</ HTML >
后台代码
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using lib;
namespace Fzbj
... {
/// <summary>
/// ajaxImage 的摘要说明。
/// </summary>
public class ajaxImage : System.Web.UI.Page
...{
private void Page_Load(object sender, System.EventArgs e)
...{
// 在此处放置用户代码以初始化页面
AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxMethod));
}
Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
...{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
...{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}
AjaxMethod.cs 数据访问 代码
using System;
using System.Data;
using System.Data.SqlClient;
namespace lib
... {
/// <summary>
/// AjaxMethod 的摘要说明。
/// </summary>
public class AjaxMethod
...{
public AjaxMethod()
...{
}
public static string ConnectionString = System.Configuration.ConfigurationSettings.AppSettings["ConnStr"].ToString();
GetDataSet#region GetDataSet
public static DataSet GetDataSet(string sql)
...{
SqlDataAdapter sda = new SqlDataAdapter(sql, ConnectionString);
DataSet ds = new DataSet();
sda.Fill(ds);
if (ds != null)
return ds;
else
return null;
}
#endregion
}
}
然后在 WebConfig 配置里加入:
< httpHandlers >
< add verb ="*" path ="*.ashx" type ="AjaxPro.AjaxHandlerFactory,AjaxPro" />
</ httpHandlers >
效果图：
实现图片的24种特效切换