JavaScript使用计时器和不透明度通过淡入淡出缓慢更改图像

我正在寻找有关我一直在处理的脚本的帮助。这是我的文件褪色.js问题在于变化，它搞砸了。请帮我找到问题和解决方案，谢谢。

JS文件

//image fade script
var opacity = 0;
function changeimg(currentimage){
rnumb = Math.floor(Math.random()*2);
var newimage = "./images/" + rnumb + ".jpg";
if (newimage !== currentimage)
{
document.getElementById("fadeImg").src= newimage;
}

}
function fadein()
{
       var fadeImg = document.getElementById('fadeImg');
       var browserName=navigator.appName;
       if(browserName=="Microsoft Internet Explorer")
       {
              browserOpacity = opacity / 10;
              fadeImg.filters.alpha.opacity = browserOpacity;
       }
       else
       {
              browserOpacity = opacity / 1000;
              fadeImg.style.opacity = browserOpacity;
       }
       if(opacity < 1000)
       {
              initiate();
       }
else if(opacity == 1000)
{
changeimg(document.getElementById("fadeImg").src);
opacity = 0;
}
}

function initiate()
{
       opacity++;
       setInterval("fadein()", 500);
}

索引.html

<script type="text/javascript" src="fade.js"></script>
<body onload="initiate()">
<img id="fadeImg" src="images/1.jpg" style="opacity:0.0; filter:alpha(opacity=0)"/>
</body>

JS-小提琴

这里也是代码的小提琴：http://jsfiddle.net/epqKr/2/（请注意，代码，因为它在小提琴中，可能会在一段时间后使您的浏览器冻结。

我认为你应该使用cross-browser library来完成这样的事情。 Microsoft Internet Explorer ，尤其是在 9 <版本中，最有可能不表现正如您所期望的那样，特别是当您尝试使用利用不透明度，alpha过滤器和定时器的函数时。您可以尝试使用jQuery, or Prototype, or MooTools和此类框架。它们都以简单、安全、更好的方式制作您正在寻找的东西。>

不要从 fadeIn() 函数中调用initiate()，而只需增加不透明度控制变量（即 opacity += 1; ）。
您可能希望保存 setInterval 返回值，以便在完成动画后终止回调。
您可能还希望通过降低间隔来提高动画速度。

animId = setInterval("fadeIn()", 5) ;

我正在研究这个，这就是我现在所拥有的：它没有任何效果，但它看起来更好。.html

<html>
<head>
<script type="text/javascript" src="fade1.js"></script>
</head>
<body onload="fadetimer()">
<img id="fadeImg" src="1.jpg" style="opacity:0.0; filter:alpha(opacity=0)"/>
</body>
</body>
</html>

脚本

    //image fade script
var opacity = 0;
function changeimg(currentimage){
rnumb = Math.floor(Math.random()*2);
var newimage = rnumb + ".jpg";
if (newimage !== currentimage)
{
document.getElementById("fade").src= newimage;
}
}
function fadein()
{
       var fade = document.getElementById('fade');
if(fade.filters.alpha.opacity >= 100 || fade.style.opacity >= 1.0)
{
changeimg(fade.src);
fade.filters.alpha.opacity = 0;
fade.style.opacity = 0;
} 
else 
{
              fade.filters.alpha.opacity += 10;
              fade.style.opacity += 0.1;
       }

}

function fadetimer()
{
setInterval("fadein()", 500);
}

相关内容

最新更新

热门标签：