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

Posted on 2006-09-19 17:04 wander 阅读(11734) 评论(17) 编辑收藏举报

一、AjaxMethod

using System;

using System.Data;

using System.Data.SqlClient;

namespace AjaxImage

{

/// <summary>

/// AjaxMethod 的摘要说明。

/// </summary>

public class AjaxMethod

{

public AjaxMethod()

{

}

public static string ConnectionString = System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"].ToString();

GetDataSet

[AjaxPro.AjaxMethod]

public static DataSet GetPhotoList( int iCategoryID )

{

string sql = "Select id,photo_path FROM Photo where photo_category_id=" + iCategoryID ;

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);

return GetDataSet( sql );

}

}//end class

}

二、页面HTML代码：

</div>

<img id="btnPlay" src="images/play_bw.gif" onclick="slideshow_automatic()" onmouseover="this.src='images/play.gif'"

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/pause_bw.gif'"> <img id="btnPrev" src="images/prev_bw.gif" onclick="previous_image()" onmouseover="this.src='images/prev.gif'"

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()"

onmouseout="this.src='images/next_bw.gif'">

</div>

三、JAVASCRIPT:

// 定时器

var timeDelay;

// 图片自动浏览时的时间间隔

var timeInterval = 4000;

// Array对象,存储图片文件的路径

var image;

// 当前显示的图片序号

var num;

// 图片信息数据表

var dt;

// 预加载图片信息

function PreloadImage(iCategoryID)

{

// 采用同步调用的方式获取图片的信息

var ds = AjaxImage.AjaxMethod.GetPhotoList(iCategoryID).value;

// 如果返回了结果

if (ds)

{

// 判断数据表是否不为空

if (ds.Tables[0].Rows.length > 0)

{

// 返回的图片信息数据表

dt = ds.Tables[0];

// 用image对象存储图片的文件路径

image = new Array();

// 图片在Photos目录下

for (var i = 0; i < dt.Rows.length; i++)

{

image[i] = "Photos/" + dt.Rows[i].photo_path;

}

// 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;

//nStatus = 0x09;

// 加载第一张图片

next_image();

}

else // 分类下没有图片

{

alert("该目录下没有图片！");

}

// 实现图片切换时的效果

function image_effects()

{

// Transition的值为0~23之间的随机数,代表24种切换效果

// 具体值与效果之间的对应见MSDN

document.slideShow.filters.revealTrans.Transition = Math.random() * 23;

// 应用并播放切换效果

document.slideShow.filters.revealTrans.apply();

document.slideShow.filters.revealTrans.play();

}

function next_image()

{

// 当前图片的序号向后移动,如果已经是最后一张,

// 则切换到第一张图片

num++;

num %= image.length;

// 图片的切换效果

image_effects();

// 将<img>对象的src属性设置为当前num对应的路径

// 切换图片的显示

document.slideShow.src = image[num];

}

function previous_image()

{

// 当前图片的序号向后移动,如果已经是最后一张,

// 则切换到第一张图片

num += image.length - 1;

num %= image.length;

// 图片的切换效果

image_effects();

// 将<img>对象的src属性设置为当前num对应的路径

// 切换图片的显示

document.slideShow.src = image[num];

}

function slideshow_automatic()

{

// 当前图片的序号向后移动,如果已经是最后一张,

// 则切换到第一张图片

num ++;

num %= image.length;

// 图片的切换效果

image_effects();

// 将<img>对象的src属性设置为当前num对应的路径

// 切换图片的显示

document.slideShow.src = image[num];

timeDelay = setTimeout( "slideshow_automatic()",timeInterval );

}

// 停止自动播放

function pauseSlideShow()

{

// 清除定时器,不再执行slideshow_automatic函数

clearTimeout(timeDelay);

}

</script>

四、在主页面的ONLOAD事件里面添加：

      onload="PreloadImage('2')"

五、WebConfig添加:
       <system.web>
       <httpHandlers>
            <add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro" />
     </httpHandlers>

      <configuration>
       <appSettings>
           <add key="ConnectionString" value="server=127.0.0.1;database=test;uid=sa;pwd=dfdf" />
       </appSettings>
六、数据库脚本:

CREATE TABLE [Photo] (

[id] [int] IDENTITY (1, 1) NOT NULL ,

[photo_title] [varchar] (128) COLLATE Chinese_PRC_CI_AS NULL ,

[photo_description] [text] COLLATE Chinese_PRC_CI_AS NULL ,

[photo_category_id] [int] NULL ,

[photo_path] [varchar] (255) COLLATE Chinese_PRC_CI_AS NULL

) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

刷新页面返回顶部

.NET学习记录

公告

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