我就是停不下来

My fortune,I create

图片渐变轮换效果
一.静态的
<HTML>
    
<HEAD>
        
<title>图片渐变轮换效果</title>
        
<meta name="generator" content="editplus">
        
<meta name="author" content="neng">
    
</HEAD>
    
<body>
        
<p>图片渐变轮换效果(IE),请等几秒钟看效果</p>
        
<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>
        
<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

        
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;
        }

    }
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
 
阅读更多
个人分类: asp.net
想对作者说点什么? 我来说一句

各种javascript效果代码

2010年04月03日 2.22MB 下载

没有更多推荐了,返回首页

不良信息举报

图片渐变轮换效果

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭