一.靜態的
<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>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; } }if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[ImageChange]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)drop table [dbo].[ImageChange]GOCREATE 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
