Javascript淡入/淡出无法正常工作

我正在开发一个小的javascript库，它可以显示许多不同的图像，并淡入淡出。不幸的是，我似乎无法让淡入正常工作

有人能告诉我怎么解决这个问题吗？ 这是我目前的代码：

//This goes in the head of the html file:
<script type="text/javascript">
var imageCount = 4;
var image = new Array(imageCount);
image [1] = "slideshow/testimg1.jpg"
image [2] = "slideshow/testimg2.jpg"
image [3] = "slideshow/testimg1.jpg"
image [4] = "slideshow/testimg2.jpg"
</script>

//This goes in the body of the html file
<img width="760" height="260" name="slide">
<script type="text/javascript">
var step = 1;
document.images.slide.style.opacity = 1;
function NextImage()
{
    //Change image
    document.images.slide.src = image [step];
    //Change step
    if (step < imageCount)
        step++;
    else
        step = 1;
    FadeIn();
}
function FadeIn()
{
    if (document.images.slide.style.opacity < 1)
    {
        //Increase opacity
        document.images.slide.style.opacity += 0.05;
        setTimeout("FadeIn()", 20);
    }
    else
    {
        //Set opacity to 1, fade out
        document.images.slide.style.opacity = 1;
        setTimeout("FadeOut()", 4000);
    }
}
function FadeOut()
{
    if (document.images.slide.style.opacity > 0.05)
    {
        //Reduce opacity
        document.images.slide.style.opacity -= 0.05;
        setTimeout("FadeOut()", 20);
    }
    else
    {
        //Set opacity to 0.5, change the image
        document.images.slide.style.opacity = 0.05;
        NextImage();
    }
}
NextImage();
</script>

谢谢

变化：

setTimeout("FadeIn()", 20);

到

看看这是否有帮助（以及其他setTimeout函数）

编辑/添加： document.images.slide.style.opacity+=0.05；实际上并不是递增的。尝试以下修改：

//Increase opacity
var x = parseFloat(document.images.slide.style.opacity);
x += 0.05;
document.images.slide.style.opacity = x;
setTimeout(FadeIn, 20);

---

这是一把小提琴

实际上，wat is oching是事件堆栈，其中set time out函数保存在特定间隔溢出后要执行的事件：）

试试看{
var-imageCount=4；
var image=新数组（imageCount）；
图像[1]=”http://i.dailymail.co.uk/i/pix/2009/06/01/article-0-05144F3C000005DC-317_468x387.jpg";
图像[2]=”http://images.theage.com.au/ftage/ffximage/kaka_narrowweb__300x323，2.jpg”；
图像[3]=”http://ricardokakaonline.com/wp-content/uploads/2011/10/istoe.com_.br-kaka.jpg";
图像[4]=”http://farm2.static.flickr.com/1226/1366784050_d697d3cde3.jpg";
var阶跃=1；
document.images.slide.style.opacity=1；
函数NextImage（）
{
//改变形象
document.images.slide.src=图像[步骤]；
//改变步骤
如果（步骤<图像计数）
step++；
其他的
步骤=1；
FadeIn（）；
}
函数FadeIn（）
{
if（document.images.slide.style.opacity<1）
{
//增加不透明度
document.images.slide.style.opacity+=0.05；
setTimeout（FadeIn（），200）；
}
其他的
{
//将“不透明度”设置为1，淡出
document.images.slide.style.opacity=1；
setTimeout（淡出（），2000）；
}
}
函数衰减（）
{
如果（document.images.slide.style.opacity>0.05）
{
//减少不透明度
document.images.slide.style.opacity-=0.05；
setTimeout（淡出（），200）；
}
其他的
{
//将“不透明度”设置为0.5，更改图像
document.images.slide.style.opacity=0.05；
下一代（）；
}
}
下一代（）；
}捕获（e）{
警报（e）
}

尝试使用jquery进行淡入淡出。。我刚刚添加了一个try-catch块，看看为什么会结冰

---

这里有一个使用javascript的淡入淡出链接，请提供您的HTML，也许还有一个关于JSFIDLE或其他东西的实例。基本思想是复制和粘贴代码，不理解它/搞错它，开始问问题。。。对吗？由于调用堆栈，代码实际上是冻结的，或者事件需要同时清除，或者使用jquery。由于调用堆栈，代码实际上是冻结的，或者事件需要同时清除，或者使用jquerysetTimeout可以认为是一次性运行并忘记（）。也许您正在考虑setInterval（），我知道，但是要存储在偶数que中的事件的相对数量超过了，我们得到了一个异常。这是y代码冻结：）我知道我的小提琴链接不起作用，我只是想用警告框显示原因。就是这样，我在链接中提出了一个jquery示例。它只是没有给出一个答案，它不仅仅是原因需要知道，因为它是冻结，以防止类似的用途在未来。我知道它不起作用。我只是想让所有人都清楚这一点，提醒大家发生了什么，为什么会冻结。您可以编辑它并尝试使用按钮单击。不用担心，如果他写的是字符串而不是方法，代码仍然会冻结。：）密码错误消息是由于setTimeout（FadeIn（），200）引起的；其中应设置超时（FadeIn，200）；谢谢你的更正。：）。但是你知道为什么会发生冰冻吗？

setTimeout(FadeIn, 20);

//Increase opacity
var x = parseFloat(document.images.slide.style.opacity);
x += 0.05;
document.images.slide.style.opacity = x;
setTimeout(FadeIn, 20);

try{


   var imageCount = 4;
var image = new Array(imageCount);
image [1] = "http://i.dailymail.co.uk/i/pix/2009/06/01/article-0-05144F3C000005DC-317_468x387.jpg";
image [2] = "http://images.theage.com.au/ftage/ffximage/kaka_narrowweb__300x323,2.jpg";
image [3] = "http://ricardokakaonline.com/wp-content/uploads/2011/10/istoe.com_.br-kaka.jpg";
image [4] = "http://farm2.static.flickr.com/1226/1366784050_d697d3cde3.jpg";
var step = 1;
document.images.slide.style.opacity = 1;
function NextImage()
{
    //Change image
    document.images.slide.src = image [step];
    //Change step
    if (step < imageCount)
        step++;
    else
        step = 1;
    FadeIn();
}
function FadeIn()
{
    if (document.images.slide.style.opacity < 1)
    {
        //Increase opacity
        document.images.slide.style.opacity += 0.05;

        setTimeout(FadeIn(), 200);
    }
    else
    {
        //Set opacity to 1, fade out

        document.images.slide.style.opacity = 1;
        setTimeout(FadeOut(), 2000);
    }
}
function FadeOut()
{
    if (document.images.slide.style.opacity > 0.05)
    {
        //Reduce opacity
        document.images.slide.style.opacity -= 0.05;
        setTimeout(FadeOut(), 200);
    }
    else
    {

        //Set opacity to 0.5, change the image
        document.images.slide.style.opacity = 0.05;
        NextImage();
    }
}
NextImage();
}catch(e){
alert(e)
}