关闭

图片渐变轮换效果

335人阅读 评论(0) 收藏 举报
一.静态的
<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
 
0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:108528次
    • 积分:2000
    • 等级:
    • 排名:第19285名
    • 原创:68篇
    • 转载:76篇
    • 译文:0篇
    • 评论:2条
    文章分类
    文章存档
    最新评论