图片渐变轮换效果

转载 2007年10月01日 12:35:00
一.静态的
<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
 

相关文章推荐

简单的js 图片轮换相册,有过渡渐变效果。兼容IE,ff

#cnt{width:100%;height:80%;} .ctrl{text-align:center;border:1px solid gray;font-size:12px;cursor:poi...

JavaScript 图片渐变效果实例

  • 2010年06月26日 09:51
  • 35KB
  • 下载

图片渐变以及倒影效果学习总结

周六加班的人伤不起a,既然公司要求周六要上班,那么为了不让时间荒废,只好逼着自己学习东西了,发现这样也挺好的,要不然在家玩一玩时间也就过去了。 由于前期项目中用到了图片的倒影效果,牵扯到2方面的知识...

多个图片渐变显示效果

  • 2010年02月11日 10:36
  • 137KB
  • 下载

Core Animation实例-图片折叠效果(CAGradientLayer渐变层)

1.分析界面效果当鼠标在图片上拖动的时候,图片有一个折叠的效果. 这种折叠效果其实就是图片的上半部分绕着X轴做一个旋转的操作. 我们图片的旋转都是绕着锚点进行旋转的.所以如果是一张图片的,办不到只...
  • xxxxLee
  • xxxxLee
  • 2016年02月03日 09:50
  • 591

java GUI 图片渐变效果源代码

  • 2011年07月11日 15:13
  • 5KB
  • 下载

swift实现图片下拉放大,导航栏渐变效果

最近的一个项目需要实现图片下拉放大的效果,并且导航栏有渐变的效果。这种效果在很多App里面已经很常见了,体验也比较好。今天就自己写了一个。先上图看看效果。 做的比较粗糙,但是基本的效果还是实现了的...

文字与图片渐变效果(图层CALayer与属性蒙版mask )

首先,我们需要稍微理清一下CAGradientLayer、CALayer,UIView和mask的大概关系。 在iOS中,能看得见摸的着的基本都是UIView,如按钮、图片等。UIView之所以能看...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片渐变轮换效果
举报原因:
原因补充:

(最多只允许输入30个字)