用JavaScript实现动态特效变换图片效果

来自站长百科
跳转至: 导航、​ 搜索

导航: 上一页 | aJAX| XML | DreamWeaver | PhotoShop | Discuz | Asp | php | java | HTML | XHTML


  • 网页中插入一张图片,给图片加上ID号为:img1,若改变ID号,那么在程序中也要作相应改变。再给图片加载一个revealTrans滤镜,完成后的图像标记<img>的完整代

码如下:

<img id="img1" src="1.jpg" width="200" height="134" style="filter:revealTrans(Transition=1,Duration=1.5)" >

滤镜中的Duration是控制切换时间(以秒计)的,本例设置的是1.5秒,若想使切换过程慢一些,可加大Duration参数的值。

  • 在网页源代码的<head>与</head>之间插入下面这段javascript程序代码:

<script language="javascript">
<!-- 
var k=0; //声明一个计数器变量
var imgname1="upfiles/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中的定时数值(以毫秒计)。

  • 在网页源代码的<body>标记中加上onload="start()"事件,以使得在网页载入时就显示动态切换效果。

至此,制作结束。