Ajax无刷新实现图片切换特效
生活随笔
收集整理的這篇文章主要介紹了
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代碼
<html?xmlns="http://www.w3.org/1999/xhtml"?>
<head?runat="server">
????<title>Ajax無刷新實現圖片切換特效</title>
????<link?type="text/css"?href="css/tree.css"?rel="stylesheet">
????????<link?type="text/css"?href="css/global.css"?rel="stylesheet">
????????<script?type=text/javascript?src=javascript/tree.js></script>
</head>
<body?onload="PreloadImage('<%=displayCategoryID?%>');">
????<form?id="form1"?runat="server">??
????????????<div?id="photoarea"?style="width:?514px;?height:?496px;?left:?0px;?top:?0px;">
????????????????
????????????????<div?id="photo"?style="left:?5px;?top:?9px;?height:?432px;">
????????????????????<img?id="slideShow"?src="images/space.gif"?style="filter:revealTrans(duration=2,transition=23)">
????????????????????
????????????????</div>????????????????
????????????????<div?id="op"?align="left"?style="left:?12px;?top:?457px">
????????????????????<span?id="progress"?style="FONT-SIZE:?20px"></span>
????????????????????
????????????????????<img?id="btnPlay"?src="images/play_bw.gif">
????????????????????<img?id="btnPause"?src="images/pause_bw.gif">
????????????????????<img?id="btnPrev"?src="images/prev_bw.gif">
????????????????????<img?id="btnNext"?src="images/next_bw.gif">
?????????????????</div>
????????????</div>
????????????
????????????<SCRIPT?type="text/javascript">
????????????
????????????//?定時器
????????????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#region?GetDataSet
????public?static?DataSet?GetDataSet(string?sql)
????{
????????SqlDataAdapter?sda?=?new?SqlDataAdapter(sql,?ConnectionString);
????????DataSet?ds?=?new?DataSet();
????????sda.Fill(ds);
????????if?(ds?!=?null)
????????????return?ds;
????????else
????????????return?null;
????}
????#endregion
????
????/**////?<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"?>
<configuration>
??<appSettings>
????<add?key="ConnectionString"?value="Data?Source=localhost;user?id=sa;password=sa;initial?catalog=DB"/>
??</appSettings>
????<connectionStrings/>
????<system.web>
??????<httpHandlers>
????????<add?verb="POST,GET"?path="ajaxpro/*.ashx"?type="AjaxPro.AjaxHandlerFactory,?AjaxPro"/>
??????</httpHandlers>???????
????????<compilation?debug="false"?/>????????
????????<authentication?mode="Windows"?/>????????
????</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 ?
總結
以上是生活随笔為你收集整理的Ajax无刷新实现图片切换特效的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用ASP.NET如何读取NT用户名
- 下一篇： Ajax实现无刷新树