蜜桃tv一区二区三区,亚洲成av人片一区二区三区,综合激情婷婷

Ajax無刷新實現圖片切換特效

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無刷新實現圖片切換特效</title>

</head>

</div>

</div>

// 定時器

var timeDelay;

// 圖片自動瀏覽時的時間間隔

var timeInterval = 4000;

// Array對象,存儲圖片文件的路徑

var image;

// 當前顯示的圖片序號

var num;

// 當前瀏覽狀態,該狀態用于控制4個按鈕的狀態

var nStatus;

// 圖片顯示區域

var slideShow = el("slideShow");

// 圖片信息數據表

var dt;

// 預加載圖片信息

function PreloadImage(iCategoryID)

{

// 采用同步調用的方式獲取圖片的信息

var ds = 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.push("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

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

// 應用并播放切換效果

slideShow.filters.revealTrans.apply();

slideShow.filters.revealTrans.play();

}

// 切換到上一張圖片

function previous_image()

{

// 圖片序號向前移動,如果已經是第一張,則切換到最后一張

num += image.length - 1;

num %= image.length;

// 圖片切換的效果

image_effects();

// 將<img>對象的src屬性設置為當前num對應的路徑

// 切換圖片的顯示

slideShow.src = image[num];

// 獲取圖片的標題、說明信息

getPhotoInfo();

// 設置按鈕狀態

setBtnStatus();

}

// 切換到下一張圖片

function next_image()

{

// 當前圖片的序號向后移動,如果已經是最后一張,

// 則切換到第一張圖片

num++;

num %= image.length;

// 圖片的切換效果

image_effects();

// 將<img>對象的src屬性設置為當前num對應的路徑

// 切換圖片的顯示

slideShow.src = image[num];

// 獲取圖片的標題、說明信息

getPhotoInfo();

// 設置按鈕狀態

setBtnStatus();

}

// 自動瀏覽圖片

function slideshow_automatic()

{

// 當前圖片的序號向后移動,如果已經是最后一張,

// 則切換到第一張圖片

num++;

num %= image.length;

// 圖片的切換效果

image_effects();

// <img>對象的src屬性設置為當前num指定的URL

// 切換圖片的顯示

slideShow.src = image[num];

// 獲取圖片的標題、說明信息

getPhotoInfo();

// 設置按鈕的狀態,使播放按鈕失效,暫停按鈕有效

nStatus &= 0x0E;

nStatus |= 0x02;

setBtnStatus();

// slideshow_automatic函數每隔一段時間自動執行

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

}

// 停止自動播放

function pauseSlideShow()

{

// 清除定時器,不再執行slideshow_automatic函數

clearTimeout(timeDelay);

// 設置按鈕的狀態,使播放按鈕有效,暫停按鈕失效

nStatus &= 0x0d;

nStatus |= 0x01;

setBtnStatus();

}

// 設置按鈕的狀態:

// 判斷的依據是當前是否處于自動播放的狀態

// 以及當前顯示的圖片是否第一張或最后一張圖片

function setBtnStatus(bDir)

{

// 如果是第一張圖片

if (num == 0)

{

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

nStatus &= 0x0b;

}

// 如果是最后一張圖片

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

{

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

nStatus &= 0x07;

}

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

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

{

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

nStatus |= 0x0c;

}

// 根據nStatus每一位的值確定4個按鈕的背景圖

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

// 根據nStatus每一位的值確定鼠標移動到4個按鈕上方時的形狀

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

// 根據nStatus的每一位確定4個按鈕是否具有onclick響應

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

// 顯示當前圖片瀏覽的進度

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

}

// 獲取圖片的標題、說明信息

function getPhotoInfo()

{

return;

// 圖片ID號

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

// 如果存在

if (id)

{

// 異步調用Ajax方法GetPhotoInfo

AjaxMethod.GetPhotoInfo(id, GetPhotoInfo_callback);

}

// 回調函數,根據響應的內容顯示標題和說明信息

function GetPhotoInfo_callback(response)

{

// 獲取圖片的信息

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

// 如果圖片存在

if (dt_photo.Rows.length > 0)

{

// 顯示圖片的標題和說明

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>

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

/// </summary>

/// <param name="iCategoryID">分類ID號</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>

/// 獲取圖片信息(標題、說明)

/// </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) 評論(1) 編輯收藏

統計

隨筆 - 48
文章 - 0
評論 - 10
引用 - 0

常用鏈接

留言簿(2)

隨筆檔案

我的鏈接

^_^ 蝦蝦的博客 (rss)
『一只小螞蟻』的專欄 (rss)
︻┳═一Java
BrianLei Blog (rss)
Daily Watch (rss)
dhtml參考手冊 (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學習 (rss)
Spring入門 (rss)
東博書院——孔慶東的博客 (rss)
何以解憂？惟有java (rss)
冰天國度 (rss)
分享Java快樂 (rss)
天涯若比鄰
安裝和配置 Ruby 支持 netbeans (rss)
小山 (rss)
幸福笨石頭！！ (rss)
熾火的塵埃 (rss)
真的有外星人嗎 (rss)
阿蜜果
隔葉黃鶯 (rss)
鷹翔宇空 (rss)

# re: Ajax無刷新實現圖片切換特效 2009-02-05 13:15 jeasonzhao

xhchc

Ajax無刷新實現圖片切換特效

評論

導航

統計

常用鏈接

留言簿(2)

隨筆檔案

我的鏈接

搜索

最新評論

閱讀排行榜

評論排行榜


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理