专注于网站技术与网络营销的博客

赞助商链接

« 实用的Web进度条湖南十运会株洲开幕《云水潇湘》气势磅礴 »

图片渐变轮换效果



 一.静态的

<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

  • 相关文章:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-Blog 1.8 Spirit Build 80710

Copyright 2005 - 2008, 完美生活(专注于网站技术与网络营销的博客). Some Rights Reserved.