Ajax 实现无刷新切换图片

Html 源码

<% ... @ Page language="c#" Codebehind="ajaxImage.aspx.cs" AutoEventWireup="false" Inherits="ajaxImage"  %>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  >
< HTML >
     < HEAD >
         < title > ajaxImage </ title >
         < meta  content ="Microsoft Visual Studio .NET 7.1"  name ="GENERATOR" >
         < meta  content ="C#"  name ="CODE_LANGUAGE" >
         < meta  content ="JavaScript"  name ="vs_defaultClientScript" >
         < meta  content ="http://schemas.microsoft.com/intellisense/ie5"  name ="vs_targetSchema" >
         < Meta  http-equiv ="Page-Enter"  Content ="revealTrans(duration=0.3, transition=19)" >
         < link  href ="../../../images/zj258.css`"  rel ="stylesheet"  type ="text/css" >
         < style  type ="text/css" > ...  a:link {...}{text-decoration: none;color: #000000;}
    a:visited {...}{ text-decoration: none; color: #999999;}
    a:hover {...}{ text-decoration: underline; color: #0066CC;}
    a:active {...}{ text-decoration: none; color: #0066CC;}
    .12-22 {...}{font-size: 12px; line-height: 22px;}
         </ style >
         < script  language ="javascript"  type ="text/javascript" > ...
            // 定时器
            var timeDelay;            
            // 图片自动浏览时的时间间隔
            var timeInterval = 10*1000;                        
            // Array对象,存储图片文件的路径
            var image;    
            //phototitle对象,存储图片的标题
            var phototitle;        
            // 当前显示的图片序号            
            var num;            
            //当前显示的图片的p_id
            var p_id;
            // 图片信息数据表
            var dt;            
            // 预加载图片信息
            function PreloadImage()
            ...{
                // 采用同步调用的方式获取图片的信息    AjaxMethod            
                var ds = lib.AjaxMethod.GetPhotoList().value;                
                // 如果返回了结果
                if (ds)
                ...{
                    // 判断数据表是否不为空
                    if (ds.Tables[0].Rows.length > 0)
                    ...{
                        // 返回的图片信息数据表
                        dt = ds.Tables[0];                        
                        // 用image对象存储图片的文件路径
                        image = new Array();          
                        //用phototitle对象存储图片的标题
                         phototitle=new Array();  
                        //用p_id对象存储图片的p_id
                        p_id=new Array();            
                        // 图片在Photos目录下
                        for (var i = 0; i < dt.Rows.length; i++)
                        ...{
                            var strPath=dt.Rows[i].p_images;
                            var strName=dt.Rows[i].p_name;
                            //var num=str.indexOf("~");                            
                            image[i] ="http://www.fzbj.net"+strPath.substr(1);//截取“~”后面的参数串  
                            phototitle[i]=strName;
                            p_id[i]=dt.Rows[i].p_id;
                        } 
                        // 初始化一些变量
                        num = -1;
                        //nStatus = 0x09;                        
                        // 加载第一张图片
                        next_image();
                    }
                    else // 分类下没有图片
                    ...{
                        alert("该目录下没有图片！");
                    }
                }                
            }
            // 实现图片切换时的效果
            function image_effects()
            ...{
                // Transition的值为0~23之间的随机数,代表24种切换效果
                // 具体值与效果之间的对应见MSDN
                var ran=Math.random() * 23;
                document.slideShow1.filters.revealTrans.Transition =ran;
                document.slideShow2.filters.revealTrans.Transition =ran;
                document.slideShow3.filters.revealTrans.Transition =ran;
                document.slideShow4.filters.revealTrans.Transition =ran;
                
                // 应用并播放切换效果slideShow
                document.slideShow1.filters.revealTrans.apply();
                document.slideShow2.filters.revealTrans.apply();
                document.slideShow3.filters.revealTrans.apply();
                document.slideShow4.filters.revealTrans.apply();
                
                document.slideShow1.filters.revealTrans.play();
                document.slideShow2.filters.revealTrans.play();
                document.slideShow3.filters.revealTrans.play();
                document.slideShow4.filters.revealTrans.play();
            }
            function next_image()
            ...{
                // 当前图片的序号向后移动,如果已经是最后一张,
                // 则切换到第一张图片
                num++;
                num %= image.length;                
                // 图片的切换效果
                image_effects();                
                // 将<img>对象的src属性设置为当前num对应的路径
                // 切换图片的显示和标题
                try
                ...{
                    document.slideShow1.src = image[num++];
                    document.getElementById("a1").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";
                    document.slideShow1.title=phototitle[num];                
                    
                    document.getElementById("srctext1").title=phototitle[num];
                    document.getElementById("srctext1").innerText=phototitle[num].substring(0,7);
                    document.getElementById("srctext1").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";
                    
                    document.slideShow2.src = image[num++];
                    document.getElementById("a2").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";
                    document.slideShow2.title=phototitle[num];
                    document.getElementById("srctext2").title=phototitle[num];
                    document.getElementById("srctext2").innerText=phototitle[num].substring(0,7);
                    document.getElementById("srctext2").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";
                    
                    document.slideShow3.src = image[num++];
                    document.getElementById("a3").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";
                    document.slideShow3.title=phototitle[num];
                    document.getElementById("srctext3").title=phototitle[num];
                    document.getElementById("srctext3").innerText=phototitle[num].substring(0,7);                
                    document.getElementById("srctext3").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";
                    
                    document.slideShow4.src = image[num++];
                    document.getElementById("a4").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";
                    document.slideShow4.title=phototitle[num];
                    document.getElementById("srctext4").title=phototitle[num];
                    document.getElementById("srctext4").innerText=phototitle[num].substring(0,7);
                    document.getElementById("srctext4").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";
                }
                catch(e)
                ...{                    
                }
                
                //谁时间自动播放
                timeDelay = setTimeout( "next_image()",timeInterval );
            }
            function slideshow_automatic()
            ...{
                // 当前图片的序号向后移动,如果已经是最后一张,
                // 则切换到第一张图片
                num ++;
                num %= image.length;
                
                // 图片的切换效果
                image_effects();
                // 将<img>对象的src属性设置为当前num对应的路径
                // 切换图片的显示和标题
                document.slideShow.src = image[num];           
                document.getElementById("srctext1").innerText=phototitle[num];           
            }
         </ script >
     </ HEAD >
     < body  onload ="PreloadImage()"  topMargin ="0" >
         < form  id ="Form1"  method ="post"  runat ="server" >
             < TABLE  id ="Table1"  class ="12-22"  cellSpacing ="0"  cellPadding ="0"  border ="0" >
                 < TR >
                     < TD >
                         < a  id ="a1"  name ="a1"  target =_blank >< IMG  class ="line-black"  style ="FILTER: revealTrans(duration=2,transition=23)"  id ="slideShow1"
                                width ="100"  border ="0"  name ="slideShow1"  height ="120"  src ="http://www.fzbj.net/upfile/enterprise/proimage/2006824/200682492055289_thumb.jpg" ></ a >
                     </ TD >
                     < TD  width ="38" >< FONT  face ="宋体" ></ FONT ></ TD >
                     < TD >
                         < a  id ="a2"  name ="a2"  target =_blank >< IMG  class ="line-black"  id ="slideShow2"  style ="FILTER: revealTrans(duration=2,transition=23)"
                                width ="100"  border ="0"  name ="slideShow2"  height ="120"  src ="http://www.fzbj.net/upfile/enterprise/proimage/2006926/200692615551250_thumb.jpg" ></ a >
                     </ TD >
                 </ TR >
                 < TR  class ="12-22" >
                     < TD  align ="center" >< FONT  face ="宋体" ></ FONT >< A  id ="srctext1"   target =_blank ></ A ></ TD >
                     < TD  width ="38" >< FONT  face ="宋体" ></ FONT ></ TD >
                     < TD  align ="center" >< FONT  face ="宋体" ></ FONT >< FONT  face ="宋体" ></ FONT >   < A  id ="srctext2"   target =_blank >
                         </ A >
                     </ TD >
                 </ TR >
                 < TR  class ="12-22" >
                     < TD >
                         < a  id ="a3"  name ="a3"   target =_blank >< IMG  class ="line-black"  style ="FILTER: revealTrans(duration=2,transition=23)"  id ="slideShow3"
                                width ="100"  border ="0"  name ="slideShow3"  height ="120"  src ="http://www.fzbj.net/upfile/enterprise/proimage/200691/200691173436571_thumb.jpg" >
                         </ a >
                     </ TD >
                     < TD  width ="38" >< FONT  face ="宋体" ></ FONT ></ TD >
                     < TD >
                         < a  id ="a4"  name ="a4"   target =_blank >< IMG  class ="line-black"  style ="FILTER: revealTrans(duration=2,transition=23)"  id ="slideShow4"
                                width ="100"  border ="0"  name ="slideShow4"  height ="120"  src ="http://www.fzbj.net/upfile/enterprise/proimage/200691/200691172430774_thumb.jpg" >
                         </ a >
                     </ TD >
                 </ TR >
                 < TR  class ="12-22" >
                     < TD  align ="center" >< FONT  face ="宋体" ></ FONT >< FONT  face ="宋体" ></ FONT >   < A  id ="srctext3"   target =_blank >
                         </ A >
                     </ TD >
                     < TD  width ="38" >< FONT  face ="宋体" ></ FONT ></ TD >
                     < TD  align ="center" >< FONT  face ="宋体" ></ FONT >< FONT  face ="宋体" ></ FONT >   < a  id ="srctext4"  target =_blank >
                         </ a >
                     </ TD >
                 </ TR >
             </ TABLE >
         </ form >
     </ body >
</ HTML >

 后台代码

 

using  System;
using  System.Collections;
using  System.ComponentModel;
using  System.Data;
using  System.Drawing;
using  System.Web;
using  System.Web.SessionState;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.HtmlControls;
using  lib;

namespace  Fzbj
... {
    /**//// <summary>
    /// ajaxImage 的摘要说明。
    /// </summary>
    public class ajaxImage : System.Web.UI.Page
    ...{
        private void Page_Load(object sender, System.EventArgs e)
        ...{
            // 在此处放置用户代码以初始化页面
            AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxMethod));
        }

        Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码
        override protected void OnInit(EventArgs e)
        ...{
            //
            // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
            //
            InitializeComponent();
            base.OnInit(e);
        }
        
        /**//// <summary>
        /// 设计器支持所需的方法 - 不要使用代码编辑器修改
        /// 此方法的内容。
        /// </summary>
        private void InitializeComponent()
        ...{    
            this.Load += new System.EventHandler(this.Page_Load);

        }
        #endregion
    }
}

AjaxMethod.cs 数据访问 代码

 

using  System;
using  System.Data;
using  System.Data.SqlClient;

namespace  lib
... {
    /**//// <summary>
    /// AjaxMethod 的摘要说明。
    /// </summary>
    public class AjaxMethod
    ...{
        public AjaxMethod()
        ...{            
        }
        public static string ConnectionString = System.Configuration.ConfigurationSettings.AppSettings["ConnStr"].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        
    }
}

然后在 WebConfig 配置里加入:

   < httpHandlers >
             < add  verb ="*"  path ="*.ashx"  type ="AjaxPro.AjaxHandlerFactory,AjaxPro"   />
      </ httpHandlers >  

效果图：

实现图片的24种特效切换