Ajax無(wú)刷新實(shí)現(xiàn)圖片切換特效

悟靜 2014-05-04

展開(kāi)全文

1.頁(yè)面cs代碼

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using AjaxPro;

public partial class _Default : System.Web.UI.Page

{

protected string displayCategoryID;

protected void Page_Load(object sender, EventArgs e)

{

Utility.RegisterTypeForAjax(typeof(AjaxMethod));

displayCategoryID = "17";

}

2.html代碼

<title>Ajax無(wú)刷新實(shí)現(xiàn)圖片切換特效</title>

</head>

</div>

</div>

// 定時(shí)器

var timeDelay;

// 圖片自動(dòng)瀏覽時(shí)的時(shí)間間隔

var timeInterval = 4000;

// Array對(duì)象,存儲(chǔ)圖片文件的路徑

var image;

// 當(dāng)前顯示的圖片序號(hào)

var num;

// 當(dāng)前瀏覽狀態(tài),該狀態(tài)用于控制4個(gè)按鈕的狀態(tài)

var nStatus;

// 圖片顯示區(qū)域

var slideShow = el("slideShow");

// 圖片信息數(shù)據(jù)表

var dt;

// 預(yù)加載圖片信息

function PreloadImage(iCategoryID)

{

// 采用同步調(diào)用的方式獲取圖片的信息

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

// 如果返回了結(jié)果

if (ds)

{

// 判斷數(shù)據(jù)表是否不為空

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

{

// 返回的圖片信息數(shù)據(jù)表

dt = ds.Tables[0];

// 用image對(duì)象存儲(chǔ)圖片的文件路徑

image = new Array();

// 圖片在Photos目錄下

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

{

image.push("Photos/" + dt.Rows[i].photo_path);

}

// imagePreload對(duì)象用于實(shí)現(xiàn)圖片的預(yù)緩存

var imagePreload = new Array();

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

{

// 通過(guò)新建Image對(duì)象,并將其src屬性指向圖片的URL

// 顯現(xiàn)圖片的預(yù)緩存

imagePreload[i] = new Image();

imagePreload[i].src = image[i];

}

// 初始化一些變量

num = -1;

nStatus = 0x09;

// 加載第一張圖片

next_image();

}

else // 分類下沒(méi)有圖片

{

alert("該目錄下沒(méi)有圖片！");

}

// 實(shí)現(xiàn)圖片切換時(shí)的效果

function image_effects()

{

// Transition的值為0~23之間的隨機(jī)數(shù),代表24種切換效果

// 具體值與效果之間的對(duì)應(yīng)見(jiàn)MSDN

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

// 應(yīng)用并播放切換效果

slideShow.filters.revealTrans.apply();

slideShow.filters.revealTrans.play();

}

// 切換到上一張圖片

function previous_image()

{

// 圖片序號(hào)向前移動(dòng),如果已經(jīng)是第一張,則切換到最后一張

num += image.length - 1;

num %= image.length;

// 圖片切換的效果

image_effects();

// 將<img>對(duì)象的src屬性設(shè)置為當(dāng)前num對(duì)應(yīng)的路徑

// 切換圖片的顯示

slideShow.src = image[num];

// 獲取圖片的標(biāo)題、說(shuō)明信息

getPhotoInfo();

// 設(shè)置按鈕狀態(tài)

setBtnStatus();

}

// 切換到下一張圖片

function next_image()

{

// 當(dāng)前圖片的序號(hào)向后移動(dòng),如果已經(jīng)是最后一張,

// 則切換到第一張圖片

num++;

num %= image.length;

// 圖片的切換效果

image_effects();

// 將<img>對(duì)象的src屬性設(shè)置為當(dāng)前num對(duì)應(yīng)的路徑

// 切換圖片的顯示

slideShow.src = image[num];

// 獲取圖片的標(biāo)題、說(shuō)明信息

getPhotoInfo();

// 設(shè)置按鈕狀態(tài)

setBtnStatus();

}

// 自動(dòng)瀏覽圖片

function slideshow_automatic()

{

// 當(dāng)前圖片的序號(hào)向后移動(dòng),如果已經(jīng)是最后一張,

// 則切換到第一張圖片

num++;

num %= image.length;

// 圖片的切換效果

image_effects();

// <img>對(duì)象的src屬性設(shè)置為當(dāng)前num指定的URL

// 切換圖片的顯示

slideShow.src = image[num];

// 獲取圖片的標(biāo)題、說(shuō)明信息

getPhotoInfo();

// 設(shè)置按鈕的狀態(tài),使播放按鈕失效,暫停按鈕有效

nStatus &= 0x0E;

nStatus |= 0x02;

setBtnStatus();

// slideshow_automatic函數(shù)每隔一段時(shí)間自動(dòng)執(zhí)行

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

}

// 停止自動(dòng)播放

function pauseSlideShow()

{

// 清除定時(shí)器,不再執(zhí)行slideshow_automatic函數(shù)

clearTimeout(timeDelay);

// 設(shè)置按鈕的狀態(tài),使播放按鈕有效,暫停按鈕失效

nStatus &= 0x0d;

nStatus |= 0x01;

setBtnStatus();

}

// 設(shè)置按鈕的狀態(tài):

// 判斷的依據(jù)是當(dāng)前是否處于自動(dòng)播放的狀態(tài)

// 以及當(dāng)前顯示的圖片是否第一張或最后一張圖片

function setBtnStatus(bDir)

{

// 如果是第一張圖片

if (num == 0)

{

// 向前切換圖片的按鈕失效

nStatus &= 0x0b;

}

// 如果是最后一張圖片

if (num == (image.length - 1))

{

// 向后切換圖片的按鈕失效

nStatus &= 0x07;

}

// 如果既不是最后一張,也不是第一張圖片

if (num != 0 && num !=(image.length - 1))

{

// 向前、向后切換圖片的按鈕均有效

nStatus |= 0x0c;

}

// 根據(jù)nStatus每一位的值確定4個(gè)按鈕的背景圖

el("btnPlay").src = ((nStatus & 0x01) == 0x01) ?

"images/play.gif" : "images/play_bw.gif";

el("btnPause").src = ((nStatus & 0x02) == 0x02) ?

"images/pause.gif" : "images/pause_bw.gif";

el("btnPrev").src = ((nStatus & 0x04) == 0x04) ?

"images/prev.gif" : "images/prev_bw.gif";

el("btnNext").src = ((nStatus & 0x08) == 0x08) ?

"images/next.gif" : "images/next_bw.gif";

// 根據(jù)nStatus每一位的值確定鼠標(biāo)移動(dòng)到4個(gè)按鈕上方時(shí)的形狀

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

// 根據(jù)nStatus的每一位確定4個(gè)按鈕是否具有onclick響應(yīng)

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

// 顯示當(dāng)前圖片瀏覽的進(jìn)度

el("progress").innerHTML = (num + 1) + " / " + image.length;

}

// 獲取圖片的標(biāo)題、說(shuō)明信息

function getPhotoInfo()

{

return;

// 圖片ID號(hào)

var id = dt.Rows[num].id;

// 如果存在

if (id)

{

// 異步調(diào)用Ajax方法GetPhotoInfo

AjaxMethod.GetPhotoInfo(id, GetPhotoInfo_callback);

}

// 回調(diào)函數(shù),根據(jù)響應(yīng)的內(nèi)容顯示標(biāo)題和說(shuō)明信息

function GetPhotoInfo_callback(response)

{

// 獲取圖片的信息

var dt_photo = response.value.Tables[0];

// 如果圖片存在

if (dt_photo.Rows.length > 0)

{

// 顯示圖片的標(biāo)題和說(shuō)明

el("title").innerHTML = dt_photo.Rows[0].photo_title;

el("description").innerHTML = dt_photo.Rows[0].photo_description;

}

</SCRIPT>

</form>

</body>

</html>

3.AjaxMethod類

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;

using AjaxPro;

/// <summary>

/// Summary description for AjaxMethod

/// </summary>

public class AjaxMethod

{

public AjaxMethod()

{

// TODO: Add constructor logic here

}

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

GetDataSet

/// <summary>

/// 獲取某個(gè)分類下圖片的id和photo_path信息

/// </summary>

/// <param name="iCategoryID">分類ID號(hào)</param>

/// <returns>圖片信息(id, photo_path)的信息</returns>

[AjaxMethod(HttpSessionStateRequirement.ReadWrite)]

public static DataSet GetPhotoList(int iCategoryID)

{

string sql = string.Format("SELECT id, photo_path FROM Photo WHERE photo_category_id = {0}", iCategoryID);

return GetDataSet(sql);

}

/// <summary>

/// 獲取圖片信息(標(biāo)題、說(shuō)明)

/// </summary>

/// <param name="id">圖片id</param>

/// <returns>圖片信息</returns>

[AjaxMethod(HttpSessionStateRequirement.ReadWrite)]

public static DataSet GetPhotoInfo(int id)

{

string sql = string.Format("SELECT photo_title, photo_description FROM Photo WHERE id = {0}", id);

return GetDataSet(sql);

}

4.Web.config

<?xml version="1.0"?>

</appSettings>

<system.web>

</httpHandlers>

</system.web>

</configuration>

5.sql腳本

if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[Photo]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)

drop table [dbo].[Photo]

CREATE TABLE [dbo].[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]

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：悟靜 > 《.net和asp.net》

舉報(bào)/認(rèn)領(lǐng)