<!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=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为JS图片过渡效果,属于站长常用代码,更多图片特效代码请访问艺雅设计JS代码频道。" />
<title>JS图片过渡效果_艺雅设计</title>
<script language="javascript">
<!-- 
var k=0; //声明一个计数器变量
var imgname1="images/lanren"; //所有图片地址的前面相同的部分,要根据实际修改这个值。
var imgname2=".jpg"; //图片的文件格式,可根据实际情修改,前面那个小点不要漏了。
var imgnub=4; //要展示的图片的张数,根据实际修改此值。
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>
</head><body style="text-align:center" onLoad="start()"><img id="img1" src="images/lanren1.jpg" width="300" height="300" style="filter:revealTrans(Transition=1,Duration=1.5)" > <p>来源:<a href="http://www.yiyacn.com/" target="_blank">艺雅设计</a> 代码整理:<a href="http://www.yiyacn.com/" target="_blank">艺雅设计</a> 感谢:<a href="http://www.nifengla.com/" target="_blank">你疯啦</a></p>
<p>*艺雅高品质网站制作专家!注:此代码仅供学习交流,请勿用于商业用途。</p>
<p></p>
<p><p>多种图片过度方式,可用作焦点图使用。</p>
<p>注意以下几点:<br />
1、所有图片的文件名和文件格式要统一,用序号区分,如本例所用图片的文件名(含相对路径)为:images/lanren1.jpg、images/lanren2.jpg、images/lanren3.jpg;<br />
2、所有图片的大小最好要一致。若图片的大小不一致,虽不影响程序的运行,但在显示时,均以插入在网页上的那张图片的大小来显示,那么,大的图片将缩小显示,小的图片放大显示,影响效果。<br />
3、在修改定时器函数setTimeout中的定时时间或修改CSS的revealTrans的切换时间Duration参数的值时,要使前者的时间大于后者的时间,否则,切换过程还没有完成就又开始下一过程了,从而使人无法看清楚图片。另外要注意,定时器是以毫秒为单位计时,而滤镜是以秒为单位计时。<br />
&nbsp;</p></p>
<p></p>
</body>
</html>