Ajax无刷新实现图片切换特效
更新时间:2023-08-19 08:07:01 阅读量: 高中教育 文档下载
- ajax实现局部刷新推荐度:
- 相关推荐
软件PS
本文由love51asp贡献
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/javascrip
t">
// 定时器
var timeDelay;
// 图片自动浏览时的时间间隔
var timeInterval = 4000;
// Array对象,存储图片文件的路径
var image;
// 当前显示的图片序号
var num;
软件PS
// 图片信息数据表
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;
// 图片的切换效果
软件PS
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 NUL
L ,
[photo_category_id] [int] NULL ,
[photo_path] [varchar] (255) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
正在阅读:
Ajax无刷新实现图片切换特效08-19
复习题(1) - 图文09-30
2016-2018年格力品牌电器公司三年发展战略规划商业计划书精选审04-16
如何使用电子面单01-17
国际结算心得体会 国际结算课作业 研究07-04
- 上海大众、一汽大众、东风日产车型与VIN代号对照表
- 第2章服装原型及原型制作
- 江苏省工商行政管理系统经济户口管理办法及四项制度
- 纪检监察业务知识试题2
- 传感器综合题答案
- 北京第二外国语学院翻硕招生人数及学费
- 初三新编英语教材下册
- 公司庆中秋、迎国庆联欢会客串词
- 向区委常委会汇报安全生产工作材料
- 2006年GCT英语模拟试题(三)及答案解析
- 经济法概念的早期使用
- 我爱做家务课堂教学设计
- 学校安全工作月报表、消防安全排查表、消防隐患排查台账
- 成本会计毕业论文
- 班级文化建设论文
- 2018年天津市高考文科试题与答案汇总(Word版) - 图文
- 铁路论文
- 2017年嵌入式系统设计师考试时间及地点
- 1.111--灾害与突发公共卫生事件应急预案
- 起爆点主图 注意买入 拉升 逃顶源码指标通达信指标公式源码
- 切换
- 特效
- 刷新
- 实现
- 图片
- Ajax
- 耐磨铝粉纯环氧漆 Intershield300
- 电缆检测常用数据
- 雅思听力场景词汇(剑桥4-8)
- 人教版五年级上册同步作文
- 2007年金桥工程表格一
- SET-FREE 节能先锋系列产品特性介绍-2010.06
- 软考UML大题知识点总结
- 成都市房管部门结合和谐物管创建培训《物业承接查验办法》
- 生物技术在玉米遗传育种中的应用及展望
- 公务员复习申论秘笈:四大能力提升申论
- 建筑公司员工奖惩制度
- 黑龙江省肇东市四中2020-2021学年高三上学期第一次月考语文试题
- 广州市工商局南沙分局行政处罚信息(2013年1月)
- 外研社英语六年级下册M1U1
- 人教课标板小学三年级语文上册 语文园地八 口语交际:夸夸我的同学 公开课教学设计
- 浙教版七年级数学上册期末试卷
- 中国点火线圈市场深度调研及未来五年投资方向研究报告
- 有色金属行业研究周报:新能源锂钴景气刚开始,关注贸易战对于经济预期的影响
- 两种功率He-Ne激光治疗头面部带状疱疹神经痛疗效观察
- 套红模板