Ajax 实现无刷新切换图片

最新推荐文章于 2021-08-06 18:23:18 发布

east_liujie

最新推荐文章于 2021-08-06 18:23:18 发布

阅读量1.9k

点赞数

分类专栏： ajax 文章标签： ajax transition image class border filter

本文链接：https://blog.youkuaiyun.com/east_liujie/article/details/1307266

版权

ajax 专栏收录该内容

0 篇文章

订阅专栏

Html 源码

<% @ Page language="c#" Codebehind="ajaxImage.aspx.cs" AutoEventWireup="false" Inherits="ajaxImage" %>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

< HTML >

< HEAD >

< title > ajaxImage </ title >

< meta content ="Microsoft Visual Studio .NET 7.1" name ="GENERATOR" >

< meta content ="C#" name ="CODE_LANGUAGE" >

< meta content ="JavaScript" name ="vs_defaultClientScript" >

< meta content ="http://schemas.microsoft.com/intellisense/ie5" name ="vs_targetSchema" >

< Meta http-equiv ="Page-Enter" Content ="revealTrans(duration=0.3, transition=19)" >

< link href ="../../../images/zj258.css`" rel ="stylesheet" type ="text/css" >

< style type ="text/css" > a:link {text-decoration: none;color: #000000;}

a:visited { text-decoration: none; color: #999999;}

a:hover { text-decoration: underline; color: #0066CC;}

a:active { text-decoration: none; color: #0066CC;}

.12-22 {font-size: 12px; line-height: 22px;}

</ style >

< script language ="javascript" type ="text/javascript" >

// 定时器

var timeDelay;

// 图片自动浏览时的时间间隔

var timeInterval = 10*1000;

// Array对象,存储图片文件的路径

var image;

//phototitle对象,存储图片的标题

var phototitle;

// 当前显示的图片序号

var num;

//当前显示的图片的p_id

var p_id;

// 图片信息数据表

var dt;

// 预加载图片信息

function PreloadImage()

{

// 采用同步调用的方式获取图片的信息 AjaxMethod

var ds = lib.AjaxMethod.GetPhotoList().value;

// 如果返回了结果

if (ds)

{

// 判断数据表是否不为空

if (ds.Tables[0].Rows.length > 0)

{

// 返回的图片信息数据表

dt = ds.Tables[0];

// 用image对象存储图片的文件路径

image = new Array();

//用phototitle对象存储图片的标题

phototitle=new Array();

//用p_id对象存储图片的p_id

p_id=new Array();

// 图片在Photos目录下

for (var i = 0; i < dt.Rows.length; i++)

{

var strPath=dt.Rows[i].p_images;

var strName=dt.Rows[i].p_name;

//var num=str.indexOf("~");

image[i] ="http://www.fzbj.net"+strPath.substr(1);//截取“~”后面的参数串

phototitle[i]=strName;

p_id[i]=dt.Rows[i].p_id;

}

// 初始化一些变量

num = -1;

//nStatus = 0x09;

// 加载第一张图片

next_image();

}

else // 分类下没有图片

{

alert("该目录下没有图片！");

}

// 实现图片切换时的效果

function image_effects()

{

// Transition的值为0~23之间的随机数,代表24种切换效果

// 具体值与效果之间的对应见MSDN

var ran=Math.random() * 23;

document.slideShow1.filters.revealTrans.Transition =ran;

document.slideShow2.filters.revealTrans.Transition =ran;

document.slideShow3.filters.revealTrans.Transition =ran;

document.slideShow4.filters.revealTrans.Transition =ran;

// 应用并播放切换效果slideShow

document.slideShow1.filters.revealTrans.apply();

document.slideShow2.filters.revealTrans.apply();

document.slideShow3.filters.revealTrans.apply();

document.slideShow4.filters.revealTrans.apply();

document.slideShow1.filters.revealTrans.play();

document.slideShow2.filters.revealTrans.play();

document.slideShow3.filters.revealTrans.play();

document.slideShow4.filters.revealTrans.play();

}

function next_image()

{

// 当前图片的序号向后移动,如果已经是最后一张,

// 则切换到第一张图片

num++;

num %= image.length;

// 图片的切换效果

image_effects();

// 将<img>对象的src属性设置为当前num对应的路径

// 切换图片的显示和标题

try

{

document.slideShow1.src = image[num++];

document.getElementById("a1").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";

document.slideShow1.title=phototitle[num];

document.getElementById("srctext1").title=phototitle[num];

document.getElementById("srctext1").innerText=phototitle[num].substring(0,7);

document.getElementById("srctext1").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";

document.slideShow2.src = image[num++];

document.getElementById("a2").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";

document.slideShow2.title=phototitle[num];

document.getElementById("srctext2").title=phototitle[num];

document.getElementById("srctext2").innerText=phototitle[num].substring(0,7);

document.getElementById("srctext2").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";

document.slideShow3.src = image[num++];

document.getElementById("a3").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";

document.slideShow3.title=phototitle[num];

document.getElementById("srctext3").title=phototitle[num];

document.getElementById("srctext3").innerText=phototitle[num].substring(0,7);

document.getElementById("srctext3").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";

document.slideShow4.src = image[num++];

document.getElementById("a4").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";

document.slideShow4.title=phototitle[num];

document.getElementById("srctext4").title=phototitle[num];

document.getElementById("srctext4").innerText=phototitle[num].substring(0,7);

document.getElementById("srctext4").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";

}

catch(e)

{

}

//谁时间自动播放

timeDelay = setTimeout( "next_image()",timeInterval );

}

function slideshow_automatic()

{

// 当前图片的序号向后移动,如果已经是最后一张,

// 则切换到第一张图片

num ++;

num %= image.length;

// 图片的切换效果

image_effects();

// 将<img>对象的src属性设置为当前num对应的路径

// 切换图片的显示和标题

document.slideShow.src = image[num];

document.getElementById("srctext1").innerText=phototitle[num];

}

</ script >

</ HEAD >

< body onload ="PreloadImage()" topMargin ="0" >

< form id ="Form1" method ="post" runat ="server" >

< TABLE id ="Table1" class ="12-22" cellSpacing ="0" cellPadding ="0" border ="0" >

< TR >

< TD >

< a id ="a1" name ="a1" target =_blank >< IMG class ="line-black" style ="FILTER: revealTrans(duration=2,transition=23)" id ="slideShow1"

width ="100" border ="0" name ="slideShow1" height ="120" src ="http://www.fzbj.net/upfile/enterprise/proimage/2006824/200682492055289_thumb.jpg" ></ a >

</ TD >

< TD width ="38" >< FONT face ="宋体" ></ FONT ></ TD >

< TD >

< a id ="a2" name ="a2" target =_blank >< IMG class ="line-black" id ="slideShow2" style ="FILTER: revealTrans(duration=2,transition=23)"

width ="100" border ="0" name ="slideShow2" height ="120" src ="http://www.fzbj.net/upfile/enterprise/proimage/2006926/200692615551250_thumb.jpg" ></ a >

</ TD >

</ TR >

< TR class ="12-22" >

< TD align ="center" >< FONT face ="宋体" ></ FONT >< A id ="srctext1" target =_blank ></ A ></ TD >

< TD width ="38" >< FONT face ="宋体" ></ FONT ></ TD >

< TD align ="center" >< FONT face ="宋体" ></ FONT >< FONT face ="宋体" ></ FONT > < A id ="srctext2" target =_blank >

</ A >

</ TD >

</ TR >

< TR class ="12-22" >

< TD >

< a id ="a3" name ="a3" target =_blank >< IMG class ="line-black" style ="FILTER: revealTrans(duration=2,transition=23)" id ="slideShow3"

width ="100" border ="0" name ="slideShow3" height ="120" src ="http://www.fzbj.net/upfile/enterprise/proimage/200691/200691173436571_thumb.jpg" >

</ a >

</ TD >

< TD width ="38" >< FONT face ="宋体" ></ FONT ></ TD >

< TD >

< a id ="a4" name ="a4" target =_blank >< IMG class ="line-black" style ="FILTER: revealTrans(duration=2,transition=23)" id ="slideShow4"

width ="100" border ="0" name ="slideShow4" height ="120" src ="http://www.fzbj.net/upfile/enterprise/proimage/200691/200691172430774_thumb.jpg" >

</ a >

</ TD >

</ TR >

< TR class ="12-22" >

< TD align ="center" >< FONT face ="宋体" ></ FONT >< FONT face ="宋体" ></ FONT > < A id ="srctext3" target =_blank >

</ A >

</ TD >

< TD width ="38" >< FONT face ="宋体" ></ FONT ></ TD >

< TD align ="center" >< FONT face ="宋体" ></ FONT >< FONT face ="宋体" ></ FONT > < a id ="srctext4" target =_blank >

</ a >

</ TD >

</ TR >

</ TABLE >

</ form >

</ body >

</ HTML >

后台代码

using System;

using System.Collections;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Web;

using System.Web.SessionState;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

using lib;

namespace Fzbj

{

/// <summary>

/// ajaxImage 的摘要说明。

/// </summary>

public class ajaxImage : System.Web.UI.Page

{

private void Page_Load(object sender, System.EventArgs e)

{

// 在此处放置用户代码以初始化页面

AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxMethod));

}

Web 窗体设计器生成的代码

}

AjaxMethod.cs 数据访问代码

using System;

using System.Data;

using System.Data.SqlClient;

namespace lib

{

/// <summary>

/// AjaxMethod 的摘要说明。

/// </summary>

public class AjaxMethod

{

public AjaxMethod()

{

}

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

GetDataSet

}

然后在 WebConfig 配置里加入:

< httpHandlers >

< add verb ="*" path ="*.ashx" type ="AjaxPro.AjaxHandlerFactory,AjaxPro" />

</ httpHandlers >

效果图：

实现图片的24种特效切换