当前位置：首页 > 编程日记 > 正文

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

编程日记 2024-11-18 01:50:00

1.页面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";

}

2.html代码

<title>Ajax无刷新实现图片切换特效</title>

</head>

</div>

</div>

// 定时器

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>

</body>

</html>

3.AjaxMethod类

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 System.Data.SqlClient;

using AjaxPro;

/// <summary>

/// Summary description for AjaxMethod

/// </summary>

public class AjaxMethod

{

public AjaxMethod()

{

// TODO: Add constructor logic here

}

public static string ConnectionString = ConfigurationSettings.AppSettings["ConnectionString"].ToString();

GetDataSet

/// <summary>

/// 获取某个分类下图片的id和photo_path信息

/// </summary>

/// <param name="iCategoryID">分类ID号</param>

/// <returns>图片信息(id, photo_path)的信息</returns>

[AjaxMethod(HttpSessionStateRequirement.ReadWrite)]

public static DataSet GetPhotoList(int iCategoryID)

{

string sql = string.Format("SELECT id, photo_path FROM Photo WHERE photo_category_id = {0}", iCategoryID);

return GetDataSet(sql);

}

/// <summary>

/// 获取图片信息(标题、说明)

/// </summary>

/// <param name="id">图片id</param>

/// <returns>图片信息</returns>

[AjaxMethod(HttpSessionStateRequirement.ReadWrite)]

public static DataSet GetPhotoInfo(int id)

{

string sql = string.Format("SELECT photo_title, photo_description FROM Photo WHERE id = {0}", id);

return GetDataSet(sql);

}

4.Web.config

<?xml version="1.0"?>

</appSettings>

<system.web>

</httpHandlers>

</system.web>

</configuration>

5.sql脚本

if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[Photo]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)

drop table [dbo].[Photo]

CREATE TABLE [dbo].[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]

6.原代码/Files/singlepine/AjaxChangeImage.rar

https://www.dkcj.cn/info/27981.html

授权管理【学习笔记】《卓有成效的管理者》第二章掌握自己的时间

每日一贴,今天的内容关键字为授权管理比拟《领导力》那本书，德鲁克这本书可操作性更强一些。管理别人之前，先管理好自己；管理好自己，首先是管理好自己的时光。其实个人时光管理，有专门的书籍，在公司里&am…

编程日记2024/11/18 01:40:00

再不参与就晚了！！2020年结束前最后一波内测福利！人人有份！

各位程序猿们都下载CSDN官方出品的插件了吧？什么？还有不知道插件是什么的同学？？你错过了太多！更酷更高效的浏览器插件，一键万能操作，新标签页极简个性，让你的工作效率UP UP UP&#…

编程日记2024/11/18 01:30:00

Node.js Express 框架 Express

Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站。 Express 框架核心特性： 可以设置中间件来响应 HTTP 请求。定义…

编程日记2024/11/18 01:20:00

Ajax实现无刷新树

1.建立一个aspx页面html代码<html xmlns"http://www.w3.org/1999/xhtml"><head id"Head1"runat"server"><title>小山</title><link type"text/css"href"../../Styles/tree_css/tree.css"rel&quo…

编程日记2024/11/18 01:10:00

GEMM性能提升200倍，AutoKernel算子优化工具正式开源

作者 | OPEN AI LAB 研究员吕春莹出品 | AI科技大本营头图 | CSDN下载自视觉中国随着AI技术的快速发展，深度学习在各个领域得到了广泛应用。深度学习模型能否成功在终端落地应用，满足产品需求，一个关键的指标就是神经网络模型的推理性能。于…

编程日记2024/11/18 01:00:00

MySQL的log_bin和sql_log_bin 到底有什么区别？

2019独角兽企业重金招聘Python工程师标准>>> log_bin:二进制日志。二进制日志的作用： 1：数据恢复如果你的数据库出问题了，而你之前有过备份，那么可以看日志文件，找出是哪个命令导致你的数据库出问题了&a…

编程日记2024/11/18 00:50:00

Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中

功能：在textbox中输入内容，动态从数据库模糊查询显示到下拉框中，以供选择1.建立一aspx页面，html代码 <HTML><HEAD><title>WebForm1</title><SCRIPT language"javascript">//城市-------…

编程日记2024/11/18 00:40:00

数据连接linux网络编程之TCP/IP基础（四）：TCP连接的建立和断开、滑动窗口

在写这篇文章之前，xxx已经写过了几篇关于改数据连接主题的文章,想要了解的朋友可以去翻一下之前的文章一、TCP段格式： TCP的段格式如下图所示源端口号与目标端口号源端口号和目标端口号，加上IP首部的源IP地址和目标IP地址唯一确定一个TCP连…

编程日记2024/11/18 00:30:00

鲲鹏高校行太原站来袭，两大课程一站式掌握未来潮流

未来是算力比拼的时代，也是属于象牙塔中莘莘学子们的时代。北京时间12月14日，为了进一步培养计算产业人才，拓展鲲鹏产业生态影响力，由中北大学信息商务学院主办，山西鲲鹏生态创新中心承办的鲲鹏高校行系列活动在中北大…

编程日记2024/11/18 00:20:00

R语言通过loess去除某个变量对数据的影响

当我们想研究不同sample的某个变量A之间的差异时，往往会因为其它一些变量B对该变量的固有影响，而影响不同sample变量A的比较，这个时候需要对sample变量A进行标准化之后才能进行比较。标准化的方法是对sample 的 A变量和B变量进行loess回归&am…

编程日记2024/11/18 00:10:00

Ajax实现DataGrid/DataList动态ToolTip

1.建立一aspx页面，html代码2.cs代码 usingSystem.Data.SqlClient;usingSystem.IO;protectedvoidPage_Load(objectsender, EventArgs e) { if (!Page.IsPostBack) { BindData(); } if (ID ! "") …

编程日记2024/11/18 00:00:00

语言模型自然语言处理[置顶] 哥伦比亚大学自然语言处理公开课授课讲稿翻译（四）...

每日一贴,今天的内容关键字为语言模型自然语言处理媒介：灵机一动看了一个自然语言处理公开课，大牛柯林斯讲解的。认为很好，就自己动手把它的讲稿翻译成中文。一方面，希望通过这个翻译过程，让自己更加理解大牛的讲解内…

编程日记2024/11/17 23:50:00

腾讯天衍实验室夺世界机器人大赛双冠军，新算法突破脑机接口瓶颈

日前，“2020世界机器人大赛-BCI脑控机器人大赛”公布成绩，腾讯天衍实验室和天津大学高忠科教授团队组成的C2Mind战队，经过多轮赛程的激烈比拼，实力入围BCI脑控机器人大赛“运动想象范式”赛题决赛，最终成功斩获技术赛“…

编程日记2024/11/17 23:40:00

免费的私人代码托管(bitbucket) 和常用git指令

转自 http://blog.csdn.net/nzing/article/details/24452475 今天想找个免费的私人代码托管平台，github,googlecode, SourceForge都不行，后来发现bitbucket（https://bitbucket.org/），注册时，如果不多于5个人…

编程日记2024/11/17 23:30:00

Ajax简单示例之改变下拉框动态生成表格

1.建立一个aspx页面，html代码<html xmlns"http://www.w3.org/1999/xhtml"><head runat"server"><title>Untitled Page</title><script type"text/javascript">var xmlHttp; function createXML…

编程日记2024/11/17 23:20:00

for语句内嵌例题与个人理解

例题1:画出一个高度为3的等腰三角形. 编写程序: #include<stdio.h> main() { int a,b,c,h; h3; \\h为高度,赋值常量3. for(a1;a<h;a) …

编程日记2024/11/17 23:10:00

2020百度云秀最新成绩单，AI Cloud活跃客户数同比去年增长65%

12月17日，“ABC SUMMIT 2020百度云智峰会”在北京举行。大会以“智者先行”为主题，百度CTO王海峰展现了518新战略后百度智能云取得的最新成绩和产业智能化成果。“云智一体”成百度智能云独特的竞争力，在各行各业加快规模化落地。本届大会首次…

编程日记2024/11/17 23:00:00

构建之法读后感part6

这个星期看完了构建之法的第六章，看了第六章之后了解到敏捷开发以用户的需求进化为核心，采用迭代、循序渐进的方法进行软件开发。在敏捷开发中，软件项目在构建初期被切分成多个子项目，各个子项目的成果都经过测试，具备…

编程日记2024/11/17 22:50:00

Ajax实现无刷新三联动下拉框

1.html代码<HTML><HEAD><title>Ajax实现无刷新三联动下拉框</title><meta content"Microsoft Visual Studio .NET 7.1"name"GENERATOR"><meta content"C#"name"CODE_LANGUAGE"><meta content&…

编程日记2024/11/17 22:40:00

用算法改造过的植物肉，有兴趣试试么？

来源 | HyperAI超神经责编 | 晋兆雨头图 | CSDN 下载自视觉中国本月初，麦当劳宣布，将于 2021 年推出植物肉全新产品线 McPlant，新品品类将包括汉堡、鸡肉替代品以及早餐三明治。事实上，麦当劳并不是尝试植物基产品的首家快餐店&am…

编程日记2024/11/17 22:30:00

浅谈软件自动化集成测试的流程

浅谈自动化集成测试相信从事软件测试专业的同行很早就知道了自动化的测试技术，也许大家也很想知道具体的软件自动化具体的运行实施过程。本人学识尚欠，目前无法对综合的软件自动化的测试进行阐述，但是本人通过不同的书籍对软件自动化的集成测…

编程日记2024/11/17 22:20:00

web聊天室总结

前言: 最近在写一个聊天室的项目，前端写了挺多的JS(function)，导致有点懵比，出了BUG，也迟迟找不到。所以昨天把写过的代码总结了一下，写成博客。项目背景参考博客: http://www.cnblogs.com/alex3714/articles/533763…

编程日记2024/11/17 22:10:00

概率图论PGM的D-Separation(D分离)

为什么80%的码农都做不了架构师？>>> 本文大部分来自：http://www.zhujun.me/d-separation-separation-d.html 其中找了一些资料发现原文中阻塞（block）中（b）部分有出路，黑体部分修改…

编程日记2024/11/17 22:00:01

CSDN湘苗培优|高起点步入职场，快人一步！

课程了解3个培养阶段结束后，让你具备：解决问题能力、交付能力、有经验。系统基础训练（阶段一）•内容：程序逻辑基础、计算机原理、操作系统工作原理、C语言（掌握内存的分配）、密码学、信息论、概…

编程日记2024/11/17 21:50:00

php与Ajax实例

****************AJAX的学习要有JavaScript、HTML、CSS等基本的Web开发能力**************** [AJAX介绍] Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。Web页面不用打断交互流程进行重新加裁，就可以动态地更新。使用Ajax，用户可以创建…

编程日记2024/11/17 21:40:00

[转]构建基于WCF Restful Service的服务

本文转自：http://www.cnblogs.com/scy251147/p/3566638.html 前言传统的Asmx服务，由于遵循SOAP协议，所以返回内容以xml方式组织。并且客户端需要添加服务端引用才能使用（虽然看到网络上已经提供了这方面的Dynamic Proxy&#xff…

编程日记2024/11/17 21:30:00

Ajax使用初步

Ajax定义为“Asynchronous JavaScript XML”的简称，也就是异步的JavaScript和XML处理。从原理上看，主要是Ajax可以通过调用HttpRequest实现与服务器的异步通讯，并最终在网页中实现丰富友好的用户界面Ajax使用初步，配置步骤1.把Aj…

编程日记2024/11/17 21:20:00

AI化身监工，上班还能摸鱼吗？

来源 | 人民数字FINTECH责编 | 晋兆雨头图 | CSDN 下载自视觉中国俗话说“上班摸鱼一时爽，一直摸鱼一直爽。”上班族这群“时间管理大师们”往往能在上班的时间中挤出一半的时间来摸鱼：在距离上班时间的最后一分钟打卡，午饭时间未到就打开各大…

编程日记2024/11/17 21:10:00

解决“安装程序无法定位现有系统分区,也无法创建新的系统分区”的方法

使用老毛桃PE格式化C盘后安装Win7出现“安装程序无法定位现有系统分区,也无法创建新的系统分区”的错误。本文给出了我遇到该情况的解决办法，亲身经历，绝非抄袭。在网上看了好多办法，都无效。最后竟然用下面的方法成功了： 1. 使用…

编程日记2024/11/17 21:00:00

Linux 上 12 个高效的文本过滤命令

在这篇文章中，我们将会看一些 Linux 中的过滤器命令行工具。过滤器是一个程序，它从标准输入读取数据，在数据上执行操作，然后把结果写到标准输出。因此，它可以用来以强大的方式处理信息，例如重新结构化输出…

编程日记2024/11/17 20:50:00

相关文章：