99成人精品,日韩精品一区二区三区在线,亚洲精品成人av

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

1.頁面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無刷新實(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++)

{

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

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

imagePreload[i] = new Image();

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

}

// 初始化一些變量

num = -1;

nStatus = 0x09;

// 加載第一張圖片

next_image();

}

else // 分類下沒有圖片

{

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

}

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

function image_effects()

{

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

// 具體值與效果之間的對(duì)應(yīng)見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)題、說明信息

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)題、說明信息

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)題、說明信息

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)題、說明信息

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)題和說明信息

function GetPhotoInfo_callback(response)

{

// 獲取圖片的信息

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

// 如果圖片存在

if (dt_photo.Rows.length > 0)

{

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

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)題、說明)

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

GO

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]

GO

6.原代碼/Files/singlepine/AjaxChangeImage.rar

posted on 2009-02-05 10:57 chu 閱讀(326) 評(píng)論(1) 編輯收藏

評(píng)論

# re: Ajax無刷新實(shí)現(xiàn)圖片切換特效 2009-02-05 13:15 jeasonzhao

其實(shí)單純只用JS也可以做到，我沒有仔細(xì)看樓主到C#代碼，個(gè)人認(rèn)為是沒有必要到，當(dāng)然封裝控件另當(dāng)別論。(*^__^*) 嘻嘻…… 回復(fù) 更多評(píng)論

新用戶注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理

導(dǎo)航

統(tǒng)計(jì)

隨筆 - 48
文章 - 0
評(píng)論 - 10
引用 - 0

常用鏈接

留言簿(2)

隨筆檔案

我的鏈接

^_^ 蝦蝦的博客 (rss)
『一只小螞蟻』的專欄 (rss)
︻┳═一Java
BrianLei Blog (rss)
Daily Watch (rss)
dhtml參考手冊(cè) (rss)
DotNet地盤 (rss)
DotNet地盤 (rss)
dwr (rss)
http://www.aygfsteel.com/Jkallen/ (rss)
Javascript 操作select控件大全（新增、修改、刪除、選中、清空、判斷存在等） (rss)
jbpm (rss)
jjjava (rss)
Max On Java (rss)
ruby學(xué)習(xí) (rss)
Spring入門 (rss)
東博書院——孔慶東的博客 (rss)
何以解憂？惟有java (rss)
冰天國度 (rss)
分享Java快樂 (rss)
天涯若比鄰
安裝和配置 Ruby 支持 netbeans (rss)
小山 (rss)
幸福笨石頭！！ (rss)
熾火的塵埃 (rss)
真的有外星人嗎 (rss)
阿蜜果
隔葉黃鶯 (rss)
鷹翔宇空 (rss)

# re: Ajax無刷新實(shí)現(xiàn)圖片切換特效 2009-02-05 13:15 jeasonzhao

xhchc

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

評(píng)論

導(dǎo)航

統(tǒng)計(jì)

常用鏈接

留言簿(2)

隨筆檔案

我的鏈接

搜索

最新評(píng)論

閱讀排行榜

評(píng)論排行榜