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#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="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 (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 数据挖掘工具

转自:动态网站制作指南 | www.knowsky.com
[数据挖掘专家] [数据挖掘研究院] [数据挖掘论坛] [数据挖掘实验室]
上一篇:未来几年动态语言谁将成为主流
下一篇:Ajax无刷新实现图片切换特效
最新评论共有 0 位网友发表了评论 , 查看所有评论
发表评论( 不能超过250字,需审核,请自觉遵守互联网相关政策法规。 )
匿名?
数据挖掘网站导航 数据挖掘论坛导航
  • 数据挖掘工具
  • 数据挖掘论坛
  • DataCruncher - Cognos
  • MineSet - MathSoft
  • Intelligent Miner - GainSmarts
  • Sqlserver - SAS - Clementine
  • CART - Weka - WizSoft
  • NeuroShell - ModelQuest
  • data mining tools - Darwin
  • 数据挖掘交友
  • 数据挖掘博客
  • 数据挖掘工具
  • 数据挖掘资源
  • 数据挖掘技术算法
  • 数据挖掘相关期刊、会议
  • 研究院联盟合作专区
  • 数据挖掘基础与相关技术
  • 数据挖掘厂商与就业
  • 数据挖掘研究者乐园
  • 知名厂商数据挖掘工具资料
  • 国内数据挖掘实验室
  • Foreign Data Mining Lab
  • 热点关注
  • 阿蒙:一个程序员老总的年终总结
  • HTML框架代码全集
  • JAVA字符集
  • 即将消逝的十大热门技术 Java也算
  • 统一建模语言(UML)的现状及发展
  • UML的三大“硬伤”
  • AJAX 常用函数
  • UML用例建模的慨念和应用
  • AJAX通用类:AJAXRequest v0.3
  • 服务器端可控情形JS跨域访问解决方法
  • 论坛最新话题
  • Foundations of Statistical Natural Langu
  • Game Theory meet Data Mining: A Recent P
  • System Building: How does it help or hin
  • 数据挖掘与Clementine培训
  • 新手报到
  • 求 SASEM 客户流失预测分析
  • 数据挖掘工程师/搜索研究院—北京——无线
  • 数据挖掘入门介绍(如何着手数据挖掘)
  • Information Overload Survey Results
  • The INEX 2005 Workshop on Element Retrie
  • 相关资讯
  • Rational Rose和UML可视化建模基础
  • 系统约定:用UML描述工作流管理
  • UML的三大“硬伤”
  • 统一建模语言UML释义之(三)
  • 绘制UML活动图的步骤和要点
  • UML用例建模的慨念和应用
  • 用Rational Rose给XML DTD造型
  • 统一建模语言(UML)的现状及发展
  • 统一建模语言UML释义(二)
  • 统一建模语言UML概述
  • 数据挖掘实验室资料
  • 数据挖掘博客地址
  • 数据挖掘实验室网站地址
  • Prepare for Medicare audits by using dat
  • 注册成为SAS用户与爱好者俱乐部会员
  • 水南梅
  • 明日烟
  • 新人报道
  • 下载
  • 厦门服务器托管,450元/月—0592-5177319 高
  • 买空间送域名--0592-5177319 高静