【分享】图片渐变轮换效果

<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.   

    改写成从数据库读取
    后台
    using System;
    using System.Collections;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Web;
    using System.Web.SessionState;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.HtmlControls;namespace Document.Pages.Wonderful.ImageChange
    {
    /// <summary>
    /// Summary description for ImageChangeFromDB.
    /// </summary>
    public class ImageChangeFromDB : System.Web.UI.Page
    {
    private void Page_Load(object sender, System.EventArgs e)
    {
    // Put user code to initialize the page here
    } #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 protected string LoadImage()
    {
    string sql="select * from ImageChange";
    DataSet ds=Document.DataHelper.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;
    }
    }
    }
    //*******************前台
    <%@ Page language="c#" Codebehind="ImageChangeFromDB.aspx.cs" AutoEventWireup="false" Inherits="Document.Pages.Wonderful.ImageChange.ImageChangeFromDB" %>
    <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>
    //***********表结构
    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
      

  2.   

    http://singlepine.cnblogs.com/articles/253396.html