Question

我正在开发一个小的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>

想法是在NextImage，FadeIn和FadeOut函数之间切换。除了衰落之外，我的一切都在工作，因为只要我测试它就会这样：

加载图像，淡出，加载第二张图像，冻结。

我希望有人可以帮助我。提前谢谢。

〜卢卡。

编辑：这修好了它：

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

谢谢！

Answer 1

变化：

setTimeout("FadeIn()", 20);

到

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);

Answer 2

这是一个工作小提琴。

实际上正在发生的是事件堆栈，其中设置的超时功能保存了在特定间隔溢出后要执行的事件:)

fiddle

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)
}

尝试使用jquery淡出淡出..我只是添加了一个try catch块来查看它为什么会冻结。

使用javascript fade in out

提供淡出淡出效果的链接

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

2 个答案: