Ajax无刷新实现图片切换特效

document.slideShow.filters.revealTrans.Transition = Math.random() * 23;
// 应用并播放切换效果
document.slideShow.filters.revealTrans.apply();
return GetDataSet( sql );
}
[AjaxPro.AjaxMethod]
public static DataSet GetPhotoInfo( int id )
{
string sql = string.Format("SELECT photo_title, photo_description FROM Photo WHERE id = {0}", id);
}
// 实现图片切换时的效果
function image_effects()
{
// Transition的值为0~23之间的随机数,代表24种切换效果
// 具体值与效果之间的对应见MSDN
return GetDataSet( sql );
}
}//end class
}
二、页面HTML代码：
<div id="Layer1" style="Z-INDEX:1; LEFT:104px; WIDTH:501px; POSITION:absolute; TOP:28px; HEIGHT:345px">
onmouseout="this.src='images/prev_bw.gif'"> <img id="btnNext" src="images/next_bw.gif" onclick="next_image()" onmouseover="this.src='images/next.gif';next_image()"
var image;
// 当前显示的图片序号
var num;
// 图片信息数据表
var dt;
// 预加载图片信息
/// AjaxMethod 的摘要说明。
/// </summary>
public class AjaxMethod
{
public AjaxMethod()
{
}
public static string ConnectionString = System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"].ToString();
本文由love51asp贡献
Ajax无刷新实现图片切换特效 收藏
一、AjaxMethod
using System;
using System.Data;
using System.Data.SqlClient;
namespace AjaxImage
{
/**//// <summary>
<div id="Layer2" style="Z-INDEX:2; LEFT:490px; WIDTH:112px; POSITION:absolute; TOP:380px; HEIGHT:26px">
<img id="btnPlay" src="images/play_bw.gif" onclick="slideshow_automatic()" onmouseover="this.src='images/play.gif'"
GetDataSet#region GetDataSet
public static DataSet GetDataSet(string sql)
{
SqlDataAdapter sda = new SqlDataAdapter(sql, ConnectionString);
image = new Array();
// 图片在Photos目录下
for (var i = 0; i < dt.Rows.length; i++)
// imagePreloew Array();
for (var i = 0;i < image.length;i++)
onmouseout="this.src='images/play_bw.gif'"> <img id="btnPause" src="images/pause_bw.gif" onclick="pauseSlideShow()" onmouseover="this.src='images/pause.gif'"
onmouseout="this.src='images/next_bw.gif'">
</div>
三、JAVASCRIPT:
<script language="javascript" type="text/javascript">
<img name="slideShow" src="images/space.gif" width="500" height="300" style="FILTER:revealTrans(duration=2,transition=23)">
</div>
function PreloadImage(iCategoryID)
{
// 采用同步调用的方式获取图片的信息
var ds = AjaxImage.AjaxMethod.GetPhotoList(iCategoryID).value;
onmouseout="this.src='images/pause_bw.gif'"> <img id="btnPrev" src="images/prev_bw.gif" onclick="previous_image()" onmouseover="this.src='images/prev.gif'"
imagePreload[i].src = image[i];
}
// 初始化一些变量
num = -1;
document.slideShow.filters.revealTrans.play();
DataSet ds = new DataSet();
sda.Fill(ds);
if (ds != null)
return ds;
else
return null;
{
// 通过新建Image对象,并将其src属性指向图片的URL
// 显现图片的预缓存
imagePreload[i] = new Image();
}
else // 分类下没有图片
{
alert("该目录下没有图片！");
}
}
}
#endregion
[AjaxPro.AjaxMethod]
public static DataSet GetPhotoList( int iCategoryID )
{
string sql = "Select id,photo_path FROM Photo where photo_category_id=" + iCategoryID ;
// 如果返回了结果
if (ds)
{
// 判断数据表是否不为空
if (ds.Tables[0].Rows.length > 0)
//nStatus = 0x09;
// 加载第一张图片
next_image();
{
// 返回的图片信息数据表
dt = ds.Tables[0];
// 用image对象存储图片的文件路径
{
image[i] = "Photos/" + dt.Rows[i].photo_path;
}
// 定时器
var timeDelay;
// 图片自动浏览时的时间间隔
var timeInterval = 4000;
// Array对象,存储图片文件的路径