做一个想项目需要图片切换，收集了几种方法

1AjaxPro无刷新切换

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

 

//HTML部分

 <div style="width: 409px">
             <div id="Layer1">
                <img name="slideShow" src="images/space.gif  />
             </div>
             <div id="Layer2">
                <img id="btnPlay" src="Images/play_bw.gif" οnclick="slideshow_automatic()" οnmοuseοver="this.src='Images/play.gif'" οnmοuseοut="this.src='images/play_bw.gif'">
                <img id="btnPause" src="Images/pause_bw.gif" οnclick="pauseSlideShow()" οnmοuseοver="this.src='Images/pause.gif'" οnmοuseοut="this.src='images/pause_bw.gif'">
                <img id="btnPrev" src="Images/prev_bw.gif" οnclick="previous_image()" οnmοuseοver="this.src='Images/prev.gif'" οnmοuseοut="this.src='images/prev_bw.gif'">
                <img id="btnNext" src="Images/next_bw.gif" οnclick="next_image()" οnmοuseοver="this.src='Images/next.gif';next_image()" οnmοuseοut="this.src='images/next_bw.gif'">
             </div>
           </div>

///C#类文件

public class AjaxImage
{
 public AjaxImage()
 {
  //
  //TODO: 在此处添加构造函数逻辑
  //
 }
    public static string ConnectionString = System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"].ToString();

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

在web。config文件中引入

  <httpHandlers>
        <add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>
      </httpHandlers>节点就ok了

 

 

方法2

  <%--
       <div id="center">
         <div>
           <div id="centertitle"><span class="biaoti1"></span></div>
           <div style="width: 409px">
             <!--显示第1张图片-->
             <div class="dis"><a href="http://www.baidu.com" target="_blank">
               <img alt="美景" src="<% =GetPictures(1,"tb_center_pic","asc")%>" height="25" />
             </a></div>
             <!--显示第2张图片-->
             <div class="undis"><a href="http://www.baidu.com" target="_blank">
               <img alt="美景" src="<% =GetPictures(2,"tb_center_pic","asc")%>" height="25" />
             </a></div>
             <!--显示第3张图片-->
             <div class="undis"><a href="http://www.baidu.com" target="_blank">
               <img alt="美景" src="<% =GetPictures(3,"tb_center_pic","asc")%>" height="25" />
             </a></div>
             <!--显示第4张图片-->
             <div class="undis"><a href="http://www.baidu.com" target="_blank">
               <img alt="美景" src="<% =GetPictures(4,"tb_center_pic","asc")%>" height="25" />
             </a></div>
             <!--显示第5张图片-->
             <div class="undis"><a href="http://www.baidu.com" target="_blank">
               <img alt="美景" src="<% =GetPictures(5,"tb_center_pic","asc")%>" height="25" />
             </a></div>
           </div>
           <div id="blogfcon">
             <div id="bogftext">
               <div class="dis">
                <h4><a href="PicNew.aspx?id=<%=GetIds(1,"tb_centerpic,"asc")%>" target="_blank"><% =GetPicTitle(1,"tb_center_pic","asc")%></a></h4>
               </div>
               <div class="undis">
                <h4><a href="PicNew.aspx?id=<%=GetIds(2,"tb_centerpic,"asc")%>" target="_blank"><% =GetPicTitle(2,"tb_center_pic","asc")%></a></h4>               
               </div>
               <div class="undis">
                <h4><a href="PicNew.aspx?id=<%=GetIds(3,"tb_centerpic,"asc")%>" target="_blank"><% =GetPicTitle(3,"tb_center_pic","asc")%></a></h4>               
               </div>
               <div class="undis">
                <h4><a href="PicNew.aspx?id=<%=GetIds(4,"tb_centerpic,"asc")%>" target="_blank"><% =GetPicTitle(4,"tb_center_pic","asc")%></a></h4>                               
               </div>
               <div class="undis">
                <h4><a href="PicNew.aspx?id=<%=GetIds(5,"tb_centerpic,"asc")%>" target="_blank"><% =GetPicTitle(5,"tb_center_pic","asc")%></a></h4>                               
               </div>
             </div>
           </div>
         </div>
       </div>
       --%>

后台文件没有写，哈哈