在网上看到如下代码
本文介绍的这种动态切换图片效果，具有二十三种切换样式，并不是用动画软件制作的动画，而是用Javascript制作出来的效果，是不是有点出乎你的意料。更值得一看的是它只用了廖廖几行程序代码，且变换的图片数量可以随意增加却不增加程序代码。你感到奇怪吗？继续往下看你就明白了。
制作思路：
给插入的图片加上一个ID（img1)号，以便 Javascript程序对其操作，再给图片加载一个CSS的动态滤镜revealTrans，然后用一小段Javascript程序定时不断地改变revealTrans滤镜的Transition参数值以获得不断地更换切换样式，同时通过程序不断地改变图像标记<img>的“src”（图片的地址）参数值，以获得更换图片的效果。
制作方法：
1、在网页中插入一张图片，给图片加上ID号为：img1，若改变ID号，那么在程序中也要作相应改变。再给图片加载一个revealTrans滤镜，完成后的图像标记<img>的完整代码如下：
<img src="image/cssp1.jpg" width="200" height="134" >
滤镜中的Duration是控制切换时间（以秒计）的，本例设置的是1.5秒，若想使切换过程慢一些，可加大Duration参数的值。
2、在网页源代码的<head>与</head>之间插入下面这段Javascript程序代码：
<script language="JavaScript">
<!--
var k=0; //声明一个计数器变量
var imgname1="image/cssp"; //所有图片地址的前面相同的部分，要根据实际修改这个值。
var imgname2=".jpg"; //图片的文件格式，可根据实际情修改，前面那个小点不要漏了。
var imgnub=3; //要展示的图片的张数，根据实际修改此值。
function start(){ //程序主体部分
obj=eval("img1"); //若图像标记的ID号改变，请修改括号中的字符串值。
if (obj.filters.item(0).Transition==23) // 这部分语句是用于改变切换样式，在23种样式中循环。
obj.filters.item(0).Transition=1;
else
obj.filters.item(0).transition++;
obj.filters.item(0).Apply();
if (k<imgnub) {k++; //这部分语句用于改变图像标记的src的图片地址（既含路径的文件名）。
}else {k=1;
}
obj.src=imgname1+k+imgname2;
obj.filters.item(0).Play();
setTimeout("start(1)",3000); //每三秒钟刷新一次。
}
-->
</script>
若要让图片在切换后停留的时间长一点，可加大定时函数setTimeout中的定时数值（以毫秒计）。
3、在网页源代码的<body>标记中加上onload="start()"事件，以使得在网页载入时就显示动态切换效果。
至此，制作结束。是不是一点都不难？！但在实际制作时应注意以下几点：
1、所有图片的文件名和文件格式要统一，用序号区分，如本例所用图片的文件名（含相对路径）为：image/cssp1.jpg、image/cssp2.jpg、image/cssp3.jpg；
2、所有图片的大小最好要一致。若图片的大小不一致，虽不影响程序的运行，但在显示时，均以插入在网页上的那张图片的大小来显示，那么，大的图片将缩小显示，小的图片放大显示，影响效果。
3、在修改定时器函数setTimeout中的定时时间或修改CSS的revealTrans的切换时间Duration参数的值时，要使前者的时间大于后者的时间，否则，切换过程还没有完成就又开始下一过程了，从而使人无法看清楚图片。另外要注意，定时器是以毫秒为单位计时，而滤镜是以秒为单位计时。
但是我调试后还是没有效果。。为什么呢
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script>
//-----WNum 为图片宽度
//-----HNum 为图片高度
//-----TNum 为文字高度(可为空 ,即不显示)
function go_Img(WNum,HNum,TNum){
Go_Num=(imgUrl.length-1);key=0;adNum=0;theTimer='';
var C_lass;
var $=function $(str){return document.write(str);};
var C_ss="<style>";
C_ss=C_ss+"div{overflow:hidden;}";
C_ss=C_ss+".W_Ord{overflow;hidden;text-align:center;color:#F00;font-weight:bold;clear:both;width:"+WNum+"px;height:"+TNum+";background-color:#eee;}";
C_ss=C_ss+".Min_On{color:#fff;Float:right;background-color:#f00;cursor:pointer;width:30px;height:20px;padding-top:1px;border:1px solid #f60;text-align:center;font-weight:bold;border-left:1px solid #eee;border-right:1px solid #eee;margin-left:-1px;}";
C_ss=C_ss+".Min_Off{color:#fff;Float:right;cursor:pointer;width:30px;height:20px;padding-top:1px;border-left:1px solid #eee;border-right:1px solid #eee;margin-left:-1px;text-align:center;font-weight:bold;}";
C_ss=C_ss+"</style>";
$(C_ss);C_ss='';
$("<Div +WNum+"px;height:"+HNum+"px;border:1px solid #eee;'>");
$("<div +WNum+"px;height:"+HNum+"px;'><img +WNum+"px;height:"+HNum+"px;' src='"+imgUrl[1]+"' name=imgInit onclick=go_Url();></Div>");
$("<div class='Rig' +WNum+"px;height:20px;margin-top:-20px;'>");
for (var i=100;i>0 ;i=i-2){
$("<Div +i/2+");-moz-opacity:0."+i/20+";opacity: 0."+i/20+"; '> </Div>");
}
$("</Div>");
$("<Div class='Rig' +WNum+"px;height:"+HNum+"px;margin-top:-20px;'>");
for (var j=Go_Num;j>0 ;j--){
if (j==1){C_lass='Min_On';}else{C_lass='Min_Off';}
$("<Div Id='Min"+j+"' class='"+C_lass+"' onmouseover=nextAd("+j+");>"+imgWord[j]+"</Div>");
}
$("</Div>");
$("</Div>");
if (TNum && TNum!=''){
$("<Div Id='W_Ord' class='W_Ord'>"+imgWord[1]+"</Div>");
}
nextAd(1);
}
function nextAd(GetNum){
var O=function O(objid){return document.getElementById(objid);}
adNum=adNum%Go_Num;
adNum++ ;
if(GetNum!=undefined && GetNum!=0){adNum=GetNum;}
if(key==0){key=1;}
else if(document.all){
imgInit.filters.revealTrans.Transition=23;
imgInit.filters.revealTrans.apply();
imgInit.filters.revealTrans.play();
if (document.all.W_Ord!=undefined){document.all.W_Ord.innerHTML=imgWord[adNum];}
for (var i=1;i<(Go_Num+1);i++ ){O('Min'+i).className='Min_Off';}
O('Min'+adNum).className='Min_On';
}
document.images.imgInit.src=imgUrl[adNum];
if (GetNum==undefined){theTimer=setTimeout(nextAd, 6000);}
else{clearTimeout(theTimer);theTimer=setTimeout(nextAd, 6000);}
}
function go_Url(jumpTarget){
jumpUrl=imgLink[adNum];
jumpTarget='_blank'; //_blank
if (jumpUrl != ''){
if (jumpTarget != '')
window.open(jumpUrl,jumpTarget);
else
location.href=jumpUrl;
}
}
</script>
<script>
//-------建产数组
var imgUrl=new Array();
var imgLink=new Array();
var imgWord=new Array();
imgUrl[1]='image/cssp1.jpg';
imgLink[1]=' cssp1.jpg';
imgWord[1]='<img src= image/1.gif>';
imgUrl[2]='image/cssp2.jpg';
imgLink[2]=' cssp2.jpg';
imgWord[2]='<img src= image/2.jpg>';
imgUrl[3]='image/cssp3.jpg';
imgLink[3]=' cssp3.jpg';
imgWord[3]='<img src= image/3.jpg>';
imgUrl[4]='image/cssp4.jpg';
imgLink[4]=' cssp4.jpg';
imgWord[4]='<img src= image/4.jpg>';
imgUrl[5]='image/cssp5.jpg';
imgLink[5]=' cssp5.jpg';
imgWord[5]='<img src= image/5.jpg>';
imgUrl[6]='image/cssp6.jpg';
imgLink[6]=' cssp6.jpg';
imgWord[6]='<img src= image/6.jpg>';
// 调用方法
go_Img(610,225,0); //-----------------------------调用方法
</script>
</body>
</html>
或者
漂亮的Flash动画人人喜欢，不过制作起来的确有一些技术难度。你知道吗，Dreamweaver作为一个网页制作工具，还可以创建好玩的Flash相册。今天我们就来利用它来制作一个简单、漂亮的Flash相册，最终如图1。
图1
插入Flash元素
运行Dreamweaver，点击菜单“插入”→“媒体”→“图像查看器”，系统会自动弹出“保存Flash元素”对话框，键入保存的文件名，例如：“Photo.swf”，点击“保存”按钮完成。
现在一个Flash元素就被插入网页中了，为满足实际需要，下面我们需要进行参数设置。鼠标点击编辑窗口中的“Flash元素”，在属性面板中重新设置动画的宽、高值为实际所需，如图2。
图2
Flash元素参数设置
下面我们还需要设置“Flash元素”的参数，为Flash相册指定调用的图片、设置相册外观。点击菜单“窗口”→标签检查器”，现在我们可以Dreamweaver右栏中看到一个“Flash元素”面板，如图3。
图3
这里可供选择的参数很多，下面我们主要讲几个基本的设置值。
imageURLs，该值用于设置调用的图片位置，我们一般将调用的图片放在同保存的“Photo.swf”文件同一文件夹为佳。鼠标点击imageURLs项目的值，系统自动在参数右侧增加“编辑数组值”按钮，点击进入，如图4。
图4
进入“编辑"imageURLs"数组对话框”，系统默认内置了三组数值，我们可以点击“+”号增加新的数值，每一组的数值同需要调用的图片文件名一一对应即可，如图5。
图5
其它“Flash元素”的参数设置方法基本同上，下面我们列一下几个重要的参数：
imageLinks，设置点击每张图片后访问的网址。
showControls，定义是否显示Flash相册的播放控制按钮。
slideAutoPlay，定义Flash相册是否自动播放。
transitionsType：定义Flash相册过渡效果的类型，默认为随机效果：Random。
title、titleColor、titleFont、titleSize：添加自定义的相册标题、颜色、字体、大小等值。
frameShow、frameThickness、frameColor：用于定义Flash相册是否有边框及边框宽度、颜色值。
注：Dreamweaver会在保存相册的文件夹中自动生成一个Scripts文件夹，上传网页时要记住一起上传。