图片渐变轮换效果

<HTML>

<HEAD>

<title>图片渐变轮换效果</title>

</HEAD>

<body>

<p>图片渐变轮换效果(IE),请等几秒钟看效果</p>

<a href="#" id="javascript.a"><img src="TN_01015_119.JPG" id="javascript.img"

border="0" style="FILTER:blendTrans(duration=2)" width="240" height="180"></a>

<!--

var ImgSrc = new Array();//图片地址

ImgSrc[0] = "TN_01087_0122.JPG"

ImgSrc[1] = "TN_01384_582.JPG"

ImgSrc[2] = "TN_01015_119.JPG"

ImgSrc[3] = "TN_05132_31.JPG"

ImgSrc[4] = "TN_05809_1005.JPG"

ImgSrc[5] = "TN_06257_84.JPG"

ImgSrc[6] = "TN_06316_153.JPG"

ImgSrc[7] = "TN_BK-Lewis&Clarkp6-7.JPG"

for (var i=0;i<ImgSrc.length;i++){(new Image()).src = ImgSrc[i];}//预加载图片

var ImgAlt = new Array();//鼠标放上去显示的文字

ImgAlt[0] = "美国《国家地理杂志》1"

ImgAlt[1] = "美国《国家地理杂志》2"

ImgAlt[2] = "美国《国家地理杂志》3"

ImgAlt[3] = "美国《国家地理杂志》4"

ImgAlt[4] = "美国《国家地理杂志》5"

ImgAlt[5] = "美国《国家地理杂志》6"

ImgAlt[6] = "美国《国家地理杂志》7"

ImgAlt[7] = "美国《国家地理杂志》8"

var ImgHerf = new Array();//链接

ImgHerf[0] = "page_01.htm"

ImgHerf[1] = "page_02.htm"

ImgHerf[2] = "page_03.htm"

ImgHerf[3] = "page_04.htm"

ImgHerf[4] = "page_05.htm"

ImgHerf[5] = "page_06.htm"

ImgHerf[6] = "page_07.htm"

ImgHerf[7] = "page_08.htm"

var step=0;

function slideit(){

var oImg = document.getElementById("javascript.img");

if (document.all){oImg.filters.blendTrans.apply();}

oImg.src=ImgSrc[step];

document.getElementById("javascript.a").href=ImgHerf[step];

oImg.title=ImgAlt[step];

if (document.all){oImg.filters.blendTrans.play();}

step = (step<(ImgSrc.length-1))?(step+1):0;

(new Image()).src = ImgSrc[step];//加载下一个图片

}

setInterval("slideit()",5000);

//-->

</script>

</body>

</HTML>

改写成从数据库读取

//前台

<%@ Page language="c#" Codebehind="ImageChangeFromDB.aspx.cs" AutoEventWireup="false" Inherits="Document.Pages.Wonderful.ImageChange.ImageChangeFromDB" %>

<HTML>

<HEAD>

<title>图片渐变轮换效果</title>

</HEAD>

<body>

<p>图片渐变轮换效果(IE),请等几秒钟看效果</p>

<a href="#" id="javascript.a"><img src="TN_01015_119.JPG" id="javascript.img"

border="0" style="FILTER:blendTrans(duration=2)" width="240" height="180"></a>

<!--

<%=LoadImage()%>

var step=0;

function slideit(){

var oImg = document.getElementById("javascript.img");

if (document.all){oImg.filters.blendTrans.apply();}

oImg.src=ImgSrc[step];

document.getElementById("javascript.a").href=ImgHerf[step];

oImg.title=ImgAlt[step];

if (document.all){oImg.filters.blendTrans.play();}

step = (step<(ImgSrc.length-1))?(step+1):0;

(new Image()).src = ImgSrc[step];//加载下一个图片

}

setInterval("slideit()",5000);

//-->

</script>

</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;

namespace Document.Pages.Wonderful.ImageChange

{

/// <summary>

/// Summary description for ImageChangeFromDB.

/// </summary>

public class ImageChangeFromDB : System.Web.UI.Page

{

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

{

// Put user code to initialize the page here

}

Web Form Designer generated code

protected string LoadImage()

{

string sql="select * from ImageChange";

DataSet ds=Document.DataHelper.GetDataSet(sql);

string img="";

for(int m=0;m<ds.Tables[0].Rows.Count;m++)

{

img+="var ImgSrc = new Array();";//图片地址

img+="ImgSrc["+m+"] = "+"""+ds.Tables[0].Rows[m]["DisplayImage"].ToString()+"";";

img+="for (var i=0;i<ImgSrc.length;i++){(new Image()).src = ImgSrc[i];}";//预加载图片

img+="var ImgAlt = new Array();";//鼠标放上去显示的文字

img+="ImgAlt["+m+"] = "+"""+ds.Tables[0].Rows[m]["Description"].ToString()+"";";

img+="var ImgHerf = new Array();";//链接

img+="ImgHerf["+m+"] = "+"""+ds.Tables[0].Rows[m]["URL"].ToString()+"";";

}

return img;

}

//表结构

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

drop table [dbo].[ImageChange]

CREATE TABLE [dbo].[ImageChange] (

[ImageChangeID] [int] NOT NULL ,

[URL] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,

[Description] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,

[DisplayImage] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL

) ON [PRIMARY]

posted on 2006-07-13 14:20 zacard 阅读(300) 评论(0) 收藏举报