一、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
分享到:
相关推荐
《Ajax无刷新实现图片切换特效》.rar
Ajax结合SQL Server实现的无刷新幻灯片切换效果源码,有暂停、运行、翻页等按钮
利用ajax技术实现无刷新换风格,无刷新切换不同颜色的产品图片 利用ajax技术实现无刷新换风格,无刷新切换不同颜色的产品图片 利用ajax技术实现无刷新换风格,无刷新切换不同颜色的产品图片
发表评论无刷新,www.sendawangluo.com页面获取评论时显示loading加载效果jquery真的是一个非常优秀的JS库,简单容易掌握,对于网页中的多级菜单、级联效果、Tab选项卡切换、图片轮转显示,实现起来都非常的简单,...
jquery真的是一个非常优秀的JS库,简单容易掌握,对于网页中的多级菜单、级联效果、Tab选项卡切换、图片轮转显示, 实现起来都非常的简单,往往就是几句代码的事。 做AJAX应用,jquery提供的$.get()、$.post()函数...
摘要:脚本资源,HTML,无刷新换肤,切换产品图片 Ajax无刷新换风格,无刷新切换不同颜色的产品图片,其实这是一套超不错的网页前端设计常用特效集,包含了滑过图片出现放大镜效果,通过控制top ,来显示不同的幻灯片,...
86. 分享一款jquery仿lightbox无刷新图片显示插件PrettyPhoto下载 87. 分享多款jQuery图片预加载切换效果(上下滚动、淡入淡出渐变等) 88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件...
86. 分享一款jquery仿lightbox无刷新图片显示插件PrettyPhoto下载 87. 分享多款jQuery图片预加载切换效果(上下滚动、淡入淡出渐变等) 88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件...
86. 分享一款jquery仿lightbox无刷新图片显示插件PrettyPhoto下载 87. 分享多款jQuery图片预加载切换效果(上下滚动、淡入淡出渐变等) 88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件...
86. 分享一款jquery仿lightbox无刷新图片显示插件PrettyPhoto下载 87. 分享多款jQuery图片预加载切换效果(上下滚动、淡入淡出渐变等) 88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件...
9.jquery仿google首页图标动画菜单效果实现模拟鼠标动画菜单的代码 10.jquery仿卓越亚马逊网鼠标移到按钮弹出菜单的效果代码 11.jquery浮动变化的个性菜单插件floatmenu下载 12.jQuery黑色风格仿Flash版下滑...
3、相册及图片加载全程Ajax化,无需刷新页面就可实现相册的切换、分页以及图片的加载等效果; 4、图片展现使用了jQuery lightBox效果; 5、解决了Picasa网络相册本身不支持原图外链的问题; 6、相册默认...
Ajax无刷新评论、翻页 来自ViewImage驱动的极简灯箱(1kb) Lately驱动的时间格式化插件(800字节) 支持快捷设置网易云音乐播放列表 文章缩略图支持 网站公告设置(默认:‘简单传递美好’) 打赏功能
内容索引:脚本资源,jQuery,图片放大 基于JQuery的图片放大切换特效,在很多优秀的相册中会见到这种功能,点击一个图片后,背景变暗,动画切换出相应大图,页面不刷新,用到相册上很酷。
背景切换,jQuery无刷新切换 jQuery实现网页的背景图片自动播放的实例,程序中加有控制按钮,用于打开、关闭本功能,点击暂停按钮,背景便会静止不动了,与每次打开背景随机载入一张图片是不同的,本效果实现的是...
8.11 使用AJAX刷新上传图片 8.12 使用AJAX刷新验证PHP会话是否有效 8.13 在AJAX异步调用时显示加载指示器 8.14 在AJAX异步调用时处理JSON数据 8.15 解析XML数据并加载到HTML表格 8.16 jQuery AJAX错误的处理方法 ...
15.18 163图片新闻切换效果 15.19 判断上传图片的大小 15.20 上传图片时预览 15.21 对联广告 15.22 带关闭的对联广告 15.23 到边界反弹的漂浮图片 15.24 用键盘控制图片移动 15.25 预装载图片提高站点速度 15.26 ...
15.18 163图片新闻切换效果 15.19 判断上传图片的大小 15.20 上传图片时预览 15.21 对联广告 15.22 带关闭的对联广告 15.23 到边界反弹的漂浮图片 15.24 用键盘控制图片移动 15.25 预装载图片提高站点速度 15.26 ...
Java绘制图片火焰效果,源代码相关注释:前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...