posts - 22, comments - 69, trackbacks - 19, articles - 29
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

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

Posted on 2006-09-19 17:04  wander  阅读(...)  评论(...编辑  收藏
一、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