图片渐变轮换效果

来源：互联网发布：淘宝男运动服装编辑：程序博客网时间：2024/04/29 10:10

一.静态的

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

二.动态的
1..html代码

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

2.cs代码

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

public static string ConnectionString=System.Configuration .ConfigurationSettings .AppSettings["ConnectionString"];

GetDataSet

protected string LoadImage()

{

string sql="select * from ImageChange";

DataSet ds=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;

}

3.数据库脚本

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]