图片渐变轮换效果
2007-10-01 12:35
369 查看
一.静态的
<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
<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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 图片渐变轮换效果
- 图片渐变轮换效果
- 图片渐变轮换效果
- 图片轮换渐变效果
- 图片渐变轮换效果
- 图片渐变轮换效果
- 简单的js 图片轮换相册，有过渡渐变效果。兼容IE,ff
- 图片轮换渐变效果
- 图片渐变轮换效果
- Javascript 图片渐变轮换效果
- 动态图片渐变轮换效果
- 图片轮换渐变效果
- 图片渐变轮换效果
- javascript图片渐变轮换效果
- 图片轮换渐变效果
- CSS Filter 代替 图片 实现 渐变背景效果。
- 超经典jquery+CSS+DIV实现图片轮换效果
- (转）迅雷的图片轮换效果
- HTML开发——项目心得（CSS实现导航栏选项卡炫酷渐变效果以及图片替换文本显示）
- Android之绚丽的图片游览效果--有点像W7效果，透明的倒影，层叠的图片，渐变的颜色透明度