一.静态的
<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
分享到:
相关推荐
图片渐变轮换焦点图效果
一般门户网站的图片动态切换渐变效果,使用非常方便简单,new一个对象即可,可动态设置图片个数,标题以及点击转到的地址等参数。如flashImage a=new flashImage();a.addImage(imageUrl,title,clickUrl);
图片渐变并自动切换效果,适合做公司产品展示、购物网站图片展示等效果
幻灯片图片渐变效果网页特效
这是一款纯CSS3实现的全屏背景图片缩小渐变切换效果源码,页面的背景图可呈现定时渐变与切换效果。渐变大小缩放效果流畅自然,采用纯css3技术控制切换效果。建议使用支持css3效果较好的火狐或谷歌等浏览器预览本源码...
WPF图片动画效果切换
渐变切换焦点图片效果
JS实现图片渐变,效果远超过图片切换 [removed][removed] [removed] var fadeimages=new Array(); fadeimages[0]=["1.jpg", "", ""]; fadeimages[1]=["2.jpg", "", ""]; fadeimages[2]=["3.jpg", "", ""]; ...
可用于UGUI image渐变效果,处理图片切换,轮播等特效处理。
JS+html 渐变滚动切换广告图片效果
jquery实现网页图片滑动、渐变切换内容效果,为了测试准确,请使用火狐或chrome浏览器。当打开本效果后,左侧框架内的图片会随鼠标的变化上下滑动,鼠标单击时,右侧为切换左侧图片的大图片,内容也会随之变换,变换...
纯AS3图片切换效果-包括渐变,电视墙,滴水融化,百叶窗,拉滑块,划入。
12种炫酷CSS3图片切换过渡效果CSS3多种图片切换转场显示动画效果,这实际上是一个网页焦点图特效,但这个焦点图的图片切换效果几乎不重复,每切换一次,切换的过渡转场特效都不一样,有淡入淡出渐变,有旋转渐变,有...
介绍:BottomMenuSlideGradientSwipe是一个仿微信6.0左右滑动渐变切换效果的demo,特分享与大家探讨 [目前上面只有一个自己写的自定义AlertDialog对话框,有兴趣的朋友可以看一下,当然肯定没得前段时间出来的那个...
左右按钮控制图片左右渐变切换,整屏切换,效果很不错,懒人之家推荐下载
分享多款jQuery图片预加载切换效果(上下滚动、淡入淡出渐变等),挺不错的,呵呵,都有Demo
这是一款css3实现的全屏背景图片渐变式切换代码特效,图片缩小渐变动画切换效果,不依赖任何JS代码。
主要介绍了Winform下实现图片切换特效的方法,包括百叶窗、淡入、旋转等多种效果,需要的朋友可以参考下
将两幅图像融合渐变过渡,实现图像的转场过渡,图像的淡入淡出效果,效果类似于视频中一个镜头慢慢切换到另一个镜头.