-1

我正在制作一个显示许多不同图像并淡入淡出的小型 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);

谢谢！

4

2 回答 2

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);
于 2013-09-30T13:09:19.137 回答
0

这是一个工作小提琴。

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

小提琴

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淡入淡出淡入淡出的链接

于 2013-09-30T13:21:03.277 回答