zoukankan      html  css  js  c++  java
  • Ajax无刷新实现图片切换特效

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

            [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="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="images/play_bw.gif" onclick="slideshow_automatic()" onmouseover="this.src='images/play.gif'"
                        onmouseout
    ="this.src='images/play_bw.gif'"> <img id="btnPause" src="images/pause_bw.gif" onclick="pauseSlideShow()" onmouseover="this.src='images/pause.gif'"
                        onmouseout
    ="this.src='images/pause_bw.gif'"> <img id="btnPrev" src="images/prev_bw.gif" onclick="previous_image()" onmouseover="this.src='images/prev.gif'"
                        onmouseout
    ="this.src='images/prev_bw.gif'"> <img id="btnNext" src="images/next_bw.gif" onclick="next_image()" onmouseover="this.src='images/next.gif';next_image()"
                        onmouseout
    ="this.src='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事件里面添加:

          onload="PreloadImage('2')"

    五、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 (11NOT 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

  • 相关阅读:
    1093 Count PAT's(25 分)
    1089 Insert or Merge(25 分)
    1088 Rational Arithmetic(20 分)
    1081 Rational Sum(20 分)
    1069 The Black Hole of Numbers(20 分)
    1059 Prime Factors(25 分)
    1050 String Subtraction (20)
    根据生日计算员工年龄
    动态获取当前日期和时间
    对计数结果进行4舍5入
  • 原文地址:https://www.cnblogs.com/wander/p/508648.html
Copyright © 2011-2022 走看看