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

Ajax结合webService实现的无刷新幻灯片切换效果源码，有暂停、运行、翻页等按钮

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Ajax无刷新实现图片切换特效</title>
    <link type="text/css" href="css/tree.css" rel="stylesheet">
    <link type="text/css" href="css/global.css" rel="stylesheet">
	<script type="text/javascript" src="javascript/tree.js"></script>
</head>
<body onload="PreloadImage('<%=displayCategoryID %>');">
    <form id="form1" runat="server">  
			<div id="photoarea" style="width: 514px; height: 496px; left: 0px; top: 0px;">
				
				<div id="photo" style="left: 5px; top: 9px; height: 432px;">
					<img id="slideShow" src="images/space.gif" style="filter:revealTrans(duration=2,transition=23)">
					
				</div>				
				<div id="op" align="left" style="left: 12px; top: 457px">
					<span id="progress" style="FONT-SIZE: 20px"></span>
					
					<img id="btnPlay" src="images/play_bw.gif">
					<img id="btnPause" src="images/pause_bw.gif">
					<img id="btnPrev" src="images/prev_bw.gif">
					<img id="btnNext" src="images/next_bw.gif">
				 </div>
			</div>
			
			<SCRIPT type="text/javascript">
			
			// 定时器
			var timeDelay;
			
			// 图片自动浏览时的时间间隔
			var timeInterval = 4000;
			
			// Array对象,存储图片文件的路径
			var image;
			
			// 当前显示的图片序号
			var num;
			
			// 当前浏览状态,该状态用于控制4个按钮的状态
			var nStatus;
			
			// 图片显示区域
			var slideShow = el("slideShow");
			
			// 图片信息数据表
			var dt;
			
			// 预加载图片信息
			function PreloadImage(iCategoryID)
			{
				// 采用同步调用的方式获取图片的信息				
				var ds = 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.push("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
				slideShow.filters.revealTrans.Transition = Math.random() * 23;
				
				// 应用并播放切换效果
				slideShow.filters.revealTrans.apply();
				slideShow.filters.revealTrans.play();
			}

			// 切换到上一张图片
			function prevIoUs_image()
			{
				// 图片序号向前移动,如果已经是第一张,则切换到最后一张
				num += image.length - 1;
				num %= image.length;
				
				// 图片切换的效果
				image_effects();
				
				// 将<img>对象的src属性设置为当前num对应的路径
				// 切换图片的显示
				slideShow.src = image[num];
				
				// 获取图片的标题、说明信息
				getPhotoInfo();
				
				// 设置按钮状态
				setBtnStatus();
			}

			// 切换到下一张图片
			function next_image()
			{
				// 当前图片的序号向后移动,如果已经是最后一张,// 则切换到第一张图片
				num++;
				num %= image.length;
				
				// 图片的切换效果
				image_effects();
				
				// 将<img>对象的src属性设置为当前num对应的路径
				// 切换图片的显示
				slideShow.src = image[num];
				
				// 获取图片的标题、说明信息
				getPhotoInfo();
				
				// 设置按钮状态
				setBtnStatus();
			}

			// 自动浏览图片
			function slideshow_automatic()
			{
				// 当前图片的序号向后移动,// 则切换到第一张图片
				num++;
				num %= image.length;
				
				// 图片的切换效果
				image_effects();
				
				// <img>对象的src属性设置为当前num指定的URL
				// 切换图片的显示
				slideShow.src = image[num];
				
				// 获取图片的标题、说明信息
				getPhotoInfo();
				
				// 设置按钮的状态,使播放按钮失效,暂停按钮有效
				nStatus &= 0x0E;
				nStatus |= 0x02;
				setBtnStatus();
				
				// slideshow_automatic函数每隔一段时间自动执行
				timeDelay = setTimeout("slideshow_automatic()",timeInterval);
			}
			
			// 停止自动播放
			function pauseSlideShow()
			{
				// 清除定时器,不再执行slideshow_automatic函数
				clearTimeout(timeDelay);

				// 设置按钮的状态,使播放按钮有效,暂停按钮失效
				nStatus &= 0x0d;
				nStatus |= 0x01;
				setBtnStatus();				
			}
			
			// 设置按钮的状态:
			// 判断的依据是当前是否处于自动播放的状态
			// 以及当前显示的图片是否第一张或最后一张图片
			function setBtnStatus(bDir)
			{
				// 如果是第一张图片
				if (num == 0)
				{
					// 向前切换图片的按钮失效
					nStatus &= 0x0b;
				}
				
				// 如果是最后一张图片
				if (num == (image.length - 1))
				{
					// 向后切换图片的按钮失效
					nStatus &= 0x07;
				}
				
				// 如果既不是最后一张,也不是第一张图片
				if (num != 0 && num !=(image.length - 1))
				{
					// 向前、向后切换图片的按钮均有效
					nStatus |= 0x0c;
				}
			
				// 根据nStatus每一位的值确定4个按钮的背景图
				el("btnPlay").src = ((nStatus & 0x01) == 0x01) ?
					"images/play.gif" : "images/play_bw.gif";
				el("btnPause").src = ((nStatus & 0x02) == 0x02) ?
					"images/pause.gif" : "images/pause_bw.gif";
				el("btnPrev").src = ((nStatus & 0x04) == 0x04) ?
					"images/prev.gif" : "images/prev_bw.gif";
				el("btnNext").src = ((nStatus & 0x08) == 0x08) ?
					"images/next.gif" : "images/next_bw.gif";

				// 根据nStatus每一位的值确定鼠标移动到4个按钮上方时的形状
				el("btnPlay").style.cursor = ((nStatus & 0x01) == 0x01) ?
					"pointer" : "default";
				el("btnPause").style.cursor = ((nStatus & 0x02) == 0x02) ?
					"pointer" : "default";
				el("btnPrev").style.cursor = ((nStatus & 0x04) == 0x04) ?
					"pointer" : "default";
				el("btnNext").style.cursor = ((nStatus & 0x08) == 0x08) ?
					"pointer" : "default";

				// 根据nStatus的每一位确定4个按钮是否具有onclick响应
				el("btnPlay").onclick = ((nStatus & 0x01) == 0x01) ?
					function() {slideshow_automatic();} : function() {return false;};
				el("btnPause").onclick = ((nStatus & 0x02) == 0x02) ?
					function() {pauseSlideShow();} : function() {return false;};
				el("btnPrev").onclick = ((nStatus & 0x04) == 0x04) ?
					function() {prevIoUs_image();} : function() {return false;};
				el("btnNext").onclick = ((nStatus & 0x08) == 0x08) ?
					function() {next_image();} : function() {return false;};
				
				// 显示当前图片浏览的进度
				el("progress").innerHTML = (num + 1) + " / " + image.length;
			}
			
			// 获取图片的标题、说明信息
			function getPhotoInfo()
			{
			    return;
				// 图片ID号
				var id = dt.Rows[num].id;
				
				// 如果存在
				if (id)
				{
					// 异步调用Ajax方法GetPhotoInfo
					AjaxMethod.GetPhotoInfo(id,GetPhotoInfo_callback);
				}
			}
			
			// 回调函数,根据响应的内容显示标题和说明信息
			function GetPhotoInfo_callback(response)
			{
				// 获取图片的信息
				var dt_photo = response.value.Tables[0];
				
				// 如果图片存在
				if (dt_photo.Rows.length > 0)
				{
					// 显示图片的标题和说明
					el("title").innerHTML = dt_photo.Rows[0].photo_title;
					el("description").innerHTML = dt_photo.Rows[0].photo_description;
				}
			}			
			</SCRIPT>
    </form>
    <a href="http://www.51aspx.com" target="_blank">download from 51aspx.com</a>

</body>
</html>

后台:Default.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using AjaxPro;

public partial class _Default : System.Web.UI.Page 
{
    protected string displayCategoryID;
    protected void Page_Load(object sender,EventArgs e)
    {
        Utility.RegisterTypeForAjax(typeof(AjaxMethod));
        displayCategoryID = "17";
    }
}

项目来源于: http://www.51aspx.com

源程序下载1:http://download.csdn.net/detail/lovegonghui/8983561

源程序下载2: http://down.51cto.com/data/2080390

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

猜你在找的Ajax相关文章