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

核心提示：一、AjaxMethodusing System;using System.Data;using System.Data.SqlClient;namespace AjaxImage{ /** <summary> /// AjaxMethod 的摘要说明。 /// </summary> p

一、AjaxMethod
using System;
using System.Data;
using System.Data.SqlClient;

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

　  [AjaxPRo.AjaxMethod]
　　　  public static DataSet GetPhotoList( int iCategoryID )
　　　  {
　　　　　  string sql = "Select id,photo_path FROM Photo where photo_category_id=" + iCategoryID ;
　　　　　  return GetDataSet( sql );
　　　  }
　　　  [AjaxPro.AjaxMethod]
　　　  public static DataSet GetPhotoInfo( int id )
　　　  {
　　　　　  string sql = string.Format("SELECT photo_title, photo_description FROM Photo WHERE id = {0}", id);
　　　　　  return GetDataSet( sql );
　　　  }

　  }//end class
}

二、页面HTML代码：
<div id="Layer1" style="Z-INDEX:1; LEFT:104px; WIDTH:501px; POSITION:absolute; TOP:28px; HEIGHT:345px">
　　　　　　　  <img name="slideShow" src="http://www.cncms.com/images/space.gif" width="500" height="300" style="FILTER:revealTrans(duration=2,transition=23)">
　　　　　  </div>
　　　　　  <div id="Layer2" style="Z-INDEX:2; LEFT:490px; WIDTH:112px; POSITION:absolute; TOP:380px; HEIGHT:26px">
　　　　　　　  <img id="btnPlay" src="http://www.cncms.com/images/play_bw.gif"
　　　　　　　　　  > <img id="btnPause" src="http://www.cncms.com/images/pause_bw.gif"
　　　　　　　　　  > <img id="btnPrev" src="http://www.cncms.com/images/prev_bw.gif"
　　　　　　　　　  > <img id="btnNext" src="http://www.cncms.com/images/next_bw.gif"
　　　　　　　　　  >
　　　　　  </div>
三、javaSCRIPT:
<script language="Javascript" type="text/javascript">
　　　　　  // 定时器
　　　　　  var timeDelay;
　　　　　 
　　　　　  // 图片自动浏览时的时间间隔
　　　　　  var timeInterval = 4000;
　　　　　 
　　　　　  // Array对象,存储图片文件的路径
　　　　　  var image;
　　　　　 
　　　　　  // 当前显示的图片序号
　　　　　  var num;
　　　　　 
　　　　　  // 图片信息数据表
　　　　　  var dt;
　　　　　  // 预加载图片信息
　　　　　  function PreloadImage(iCategoryID)
　　　　　  {
　　　　　　　  // 采用同步调用的方式获取图片的信息　　　　　　　 
　　　　　　　  var ds = AjaxImage.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[i] = "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
　　　　　　　  document.slideShow.filters.revealTrans.Transition = Math.random() * 23;
　　　　　　　 
　　　　　　　  // 应用并播放切换效果
　　　　　　　  document.slideShow.filters.revealTrans.apply();
　　　　　　　  document.slideShow.filters.revealTrans.play();
　　　　　  }
　　　　　  function next_image()
　　　　　  {
　　　　　　　  // 当前图片的序号向后移动,如果已经是最后一张,
　　　　　　　  // 则切换到第一张图片
　　　　　　　  num++;
　　　　　　　  num %= image.length;
　　　　　　　 
　　　　　　　  // 图片的切换效果
　　　　　　　  image_effects();
　　　　　　　 
　　　　　　　  // 将<img>对象的src属性设置为当前num对应的路径
　　　　　　　  // 切换图片的显示
　　　　　　　  document.slideShow.src = image[num];　　　　　　　 
　　　　　  }
　　　　　  function previous_image()
　　　　　  {
　　　　　　　  // 当前图片的序号向后移动,如果已经是最后一张,
　　　　　　　  // 则切换到第一张图片
　　　　　　　  num += image.length - 1;
　　　　　　　  num %= image.length;
　　　　　　　 
　　　　　　　  // 图片的切换效果
　　　　　　　  image_effects();
　　　　　　　 
　　　　　　　  // 将<img>对象的src属性设置为当前num对应的路径
　　　　　　　  // 切换图片的显示
　　　　　　　  document.slideShow.src = image[num];　　　　　　　　　　　　　　　 
　　　　　 
　　　　　  }
　　　　　  function slideshow_automatic()
　　　　　  {
　　　　　　　  // 当前图片的序号向后移动,如果已经是最后一张,
　　　　　　　  // 则切换到第一张图片
　　　　　　　  num ++;
　　　　　　　  num %= image.length;
　　　　　　　 
　　　　　　　  // 图片的切换效果
　　　　　　　  image_effects();
　　　　　　　 
　　　　　　　  // 将<img>对象的src属性设置为当前num对应的路径
　　　　　　　  // 切换图片的显示
　　　　　　　  document.slideShow.src = image[num];
　　　　　　　  timeDelay = setTimeout( "slideshow_automatic()",timeInterval );　　　　　　　 
　　　　　  }
　　　　　  // 停止自动播放
　　　　　  function pauseSlideShow()
　　　　　  {
　　　　　　　  // 清除定时器,不再执行slideshow_automatic函数
　　　　　　　  clearTimeout(timeDelay);
　　　　　  }
　　　  </script>
四、在主页面的ONLOAD事件里面添加：

 

五、WebConfig添加:
　　　 <system.web>
　　　 <httpHandlers>
　　　　　  <add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro" />
　　 </httpHandlers>

  <configuration>
　　　 <appSettings>
　　　　　 <add key="ConnectionString" value="server=127.0.0.1;database=test;uid=sa;pwd=dfdf" />
　　　 </appSettings>　 
六、数据库脚本:
　　　 CREATE TABLE [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
http://www.cnblogs.com/wander/archive/2006/09/19/508648.html