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

晨曦之光 发布于 2012/03/09 15:05
阅读 1K+
收藏 0

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 >
                    
&nbsp;&nbsp;&nbsp;
                    
< 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[].Rows.length > )
                    
{
                        
// 返回的图片信息数据表
                        dt = ds.Tables[];
                        
                        
// 用image对象存储图片的文件路径
                        image = new Array();
                        
                        
// 图片在Photos目录下
                        for (var i = ; i < dt.Rows.length; i++)
                        
{
                            image.push(
"Photos/" + dt.Rows[i].photo_path);
                        }

                                    
                        
// imagePreload对象用于实现图片的预缓存
                        var imagePreload = new Array();
                        
for (var i = ;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 == )
                
{
                    
// 向前切换图片的按钮失效
                    nStatus &= 0x0b;
                }

                
                
// 如果是最后一张图片
                if (num == (image.length - 1))
                
{
                    
// 向后切换图片的按钮失效
                    nStatus &= 0x07;
                }

                
                
// 如果既不是最后一张,也不是第一张图片
                if (num !=  && 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[];
                
                
// 如果图片存在
                if (dt_photo.Rows.length > )
                
{
                    
// 显示图片的标题和说明
                    el("title").innerHTML = dt_photo.Rows[].photo_title;
                    el(
"description").innerHTML = dt_photo.Rows[].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" ?>
< 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
 
原文链接: http://blog.csdn.net/21aspnet/article/details/1534275
加载中
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部