Question

请高手帮忙解决在javascript里遇到的问题。这是个图片淡入淡出的效果，问题是在浏览网页时会不断下载图片

<script language="javascript">
shu=new Array(4)
shu[1]='<img src=images/图形1.jpg name=txt style=filter:alpha(opacity=100)>';
shu[2]='<img src=images/图形2.jpg name=txt1 style=filter:alpha(opacity=100)>';
shu[3]='<img src=images/图形3.jpg name=txt style=filter:alpha(opacity=100)>';
shu[4]='<img src=images/图形4.jpg name=txt1 style=filter:alpha(opacity=100)>';
b=99;
c=true;
i=1;
a=2;
function tupian() {
if (document.all);
document.getElementById('Layer2').innerHTML=shu[i];
document.getElementById('Layer1').innerHTML=shu[a];
if (c==true){b++};
if (b==100) {c=false;b--};
if (b==0) {c=true;b++};
if (c==false) {b--};
txt.filters.alpha.opacity=0+b;
window.setTimeout("tupian()",40);}
</script>
怎么解决啊！！

Answer 1

我感觉你是想做一个四张图片轮流淡进淡出的效果，问题主要出在你用改写innerHTML的方式来切换图片。每次改写innerHTML都会引起图片重新加载的，你要换一个思路：
让四张图片只加载一次，一旦加载了就不再清除掉，通过style.display=''和style.display='none'来控制要显示哪一张图片。也就是说，在body里面直接放入四张图片，初始状态都是style.display='none'：
<img src='images/图形1.jpg' name='txt1' style='filter:alpha(opacity=100); display: none'>
<img src='images/图形2.jpg' name='txt2' style='filter:alpha(opacity=100); display: none'>
<img src='images/图形3.jpg' name='txt3' style='filter:alpha(opacity=100); display: none'>
<img src='images/图形4.jpg' name='txt4' style='filter:alpha(opacity=100); display: none'>

然后在javascript里面控制某个图片style.display=''把它显示出来，其余三个style.display='none'把它们隐藏掉；
在style.display=''的这个图片，再通过循环改变它的透明度。
这个部分我看你有这个能力处理的，把旧代码稍作改动即可。

追问

我还想请问一下像那种新闻图片淡入淡出效果代码怎么写啊

追答

你的代码中，通过循环来改变filters.alpha.opacity的值，不就是在处理淡入淡出吗？

追问

我是想那种图片之间的切换效果，尝试了好多遍都不行，指教啊。

Answer 2

涉及到淡入淡出之类的js上的动画效果的话，建议看用jquery来做，会方便很多