图片渐变轮换效果

转载 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
 

CSS中的渐变效果

1.渐变的含义与组成 含义:两种或多种颜色之间平滑过渡的效果 组成:由色标来组成 色标: 1、颜色 2、颜色出现的位置 2.渐变的属性和取值 1、属性       ...
  • baidu_25343343
  • baidu_25343343
  • 2016年10月08日 01:52
  • 1388

html中利用js实现简单图片轮换效果

图片轮播 window.onload = function() { flag = 0; obj1 = document.getElementById("...
  • fang0609
  • fang0609
  • 2015年08月06日 16:59
  • 2302

android 多张图片渐变切换控件

本来项目是用的viewpager实现的轮播滚动,但是客户觉得轮播的效果太大众化了,于是就要我们改成渐变切换的效果.听到这需求,我最先想到是给viewpager设置切换动画,但是无论怎么设置动画,都要手...
  • totcw
  • totcw
  • 2016年08月09日 13:42
  • 4708

JS图片自动轮换效果实现

今天不在状态,五一快到了,俺就特想玩了。好了,天色已晚,闲话不多说,看下用javaScript 实现的图片自动轮换效果,先看图片 下面是具体的代码,还是比较简单的。 越狱的囚徒...
  • php5921
  • php5921
  • 2014年04月30日 00:16
  • 2921

从零开始实现图片加载特效之渐变加载、圆角图片

有时候图片直接显示过于生硬,这个时候我们就需要给加载图片的过程加上特效,比如渐变显示。有时候我们需要图片加圆角...
  • gengqiquan
  • gengqiquan
  • 2016年11月14日 18:04
  • 8545

实现图片渐变透明的轮播效果(欢迎界面)

package com.example.androidtest; import android.os.Bundle; import android.app.Activity; import andr...
  • kangaroo835127729
  • kangaroo835127729
  • 2014年12月16日 12:36
  • 2216

如何实现图片轮换的效果

实现上面的效果图: HTML代码如下: html> html> head lang="en"> meta charset="UTF-8"> --> title>3Ati...
  • fanxiaokun526
  • fanxiaokun526
  • 2015年06月08日 11:12
  • 369

js图片轮换效果

html代码: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> ...
  • u010433173
  • u010433173
  • 2013年04月29日 16:34
  • 724

PyQt4 精彩实例分析* 实例20 窗体的淡入淡出效果

本实例实现一个窗体淡入淡出效果的例子,当窗体进行页面切换时,原页面的消失和新页面的显现并不是瞬间切换的,而是逐渐消隐和逐渐显现的过程。 本实例实现淡入淡出效果的基本原理可由下图描述。   ...
  • wdt3385
  • wdt3385
  • 2013年09月22日 10:55
  • 1148

动画效果(一)-渐变动画

安卓系统的界面动画效果丰富,最常用到到就是渐变动画。本文将详细的介绍如何定义和使用渐变动画。...
  • anddlecn
  • anddlecn
  • 2016年06月27日 14:11
  • 4605
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片渐变轮换效果
举报原因:
原因补充:

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