用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()"事件，以使得在网页载入时就显示动态切换效果。

至此，制作结束。

取自“https://www.zzbaike.com/wiki/用JavaScript实现动态特效变换图片效果?oldid=28896”