js实现(多个)图片定时闪烁变化(transition=1)
<html><head>
<title></title>
<script language="javascript">
<!--
//图片的变化有23种,这个页面先实现多个图片第1种transition变化。
function start()
{
obj=eval("img1");
obj.style.visibility="hidden";
obj.filters.item(0).Apply();
obj.style.visibility="visible";
obj.src="baby7.jpg"; //选择要加载的图片
obj.filters.item(0).Play();
start2();
}
function start3(obj2,str2,ii)
{
if (document.all)
//测试eval(obj2+'.innerHTML = str2');
obj2.src="baby7.jpg";
}
var i=0;
var p=0;
function start2()
{
//obj2 = eval("tag1");
var str1="abcefghijklmnopqrstuvwxyz";
if (i<str1.length)
{
i++;
str2 = str1.substring(0,i); //可以用str1.slice(0,i);
start3('img1',"<font color='red'>" + str2 + "</font>",i);
setTimeout("start2()",300);
}
if (i==str1.length)
{
i=16; //调整可以调整图片变化的速度,数值在1-22为合适,变化太快会失灵或效果不实际
p++;
if (p==8) p=1;
setTimeout("start1(p)",2000); //可以直接用start1();
}
}
function start1(p)
{
obj=eval("img1");
obj.style.visibility="hidden";
obj.filters.item(0).Apply();
obj.style.visibility="visible";
//以下为选择变化的图片
if (p==1)
{
obj.src="baby1.jpg";
}
if (p==2)
{
obj.src="baby2.jpg";
//obj.style.width="200px"; //这里可以调整图片大小
//obj.style.height="158px";
}
if (p==3)
{
obj.src="baby3.jpg";
}
if (p==4)
{
obj.src="baby4.jpg";
}
if (p==5)
{
obj.src="baby5.jpg";
}
if (p==6)
{
obj.src="baby6.jpg";
}
if (p==7)
{
obj.src="baby7.jpg";
p++;
}
obj.filters.item(0).Play();
}
-->
</script>
</head>
<body onload=start()>
<div id="tag1">
<img id="img1" src="XXX.jpg" width="150" height="140" style="filter:revealTrans(Transition=1,Duration=1.5)" >
</div>
</body>
</html>
[ 本帖最后由 js_friend 于 2011-6-20 17:01 编辑 ]