一.静态的
<HTML>
<HEAD>
<title>图片渐变轮换效果</title>
<meta name=generator content=editplus>
<meta name=author content=neng>
</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>
<script>
<!--
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>
<meta name=generator content=editplus>
<meta name=author content=neng>
</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>
<script>
<!--
<%=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#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
/**//// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
public static string ConnectionString=System.Configuration .ConfigurationSettings .AppSettings[ConnectionString];
GetDataSet#region GetDataSet
public static DataSet GetDataSet(string sql)
{
SqlDataAdapter sda =new SqlDataAdapter(sql,ConnectionString);
DataSet ds=new DataSet();
sda.Fill(ds);
return ds;
}
#endregion
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]
GO
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]
GO