Javascript递归问题

| 我正在尝试编写一个将在图像数组之间更改的函数。我的想法对我来说是有意义的，但是当我按下面的方式运行它时，第一个图像加载，然后第二个图像在某个点加载（透明度不变），然后什么也没有发生。这是JavaScript代码：

        var image1 = new Image();var image2 = new Image(); var image3 = new Image();
        image1.src = \"images/website6.jpg\"; image2.src = \"images/website7.jpg\"; image3.src = \"images/sunset.jpg\";
        var images = new Array(\"images/website6.jpg\",\"images/website7.jpg\",\"images/sunset.jpg\");
        /*document.slide.style.opacity = 1;
        document.slide.stylebg.opacity = 0;*/
        setTimeout(function() { fade(images,0); }, 2000);
        function delay(arr,num)
        {
            document.slide.src = arr[num % 3];
            document.slide.style.opacity = 1;
            document.slidebg.style.opacity = 0;
            document.slidebg.src = arr[(num+1)%3];
            var number = num + 1;
            setTimeout(function() { fade(arr,number); }, 2000);
        }
        function fade(arr,num)
        {
            /*alert(\'fadebefore \' + (document.slide.style.opacity).toString())*/
            document.slide.style.opacity -= 0.1
            /*alert(\'fade\')*/
            document.slide.stylebg.opacity += 0.1
            if (document.slide.style.opacity == 0)
            {
                setTimeout(function() { delay(arr,num); }, 150);
            }
            else
            {
                setTimeout(function() { fade(arr,num); }, 1500);
            }
        }

HTML很简单。我有两节课； style和stylebg。 style坐在stylebg前面，然后我根据需要更改不透明度和图像。 JavaScript对我来说似乎合乎逻辑，但无法按预期工作。另外值得注意的是有3条评论。第一条评论（第3-4行）试图将不透明度设置为开始时的状态。但是，如果我这样做，那么我得到的进展将比上面还要少：加载第一张图像，然后什么也没有发生。后两个注释用于调试目的。如果我不加注释，则图像更改将在两个警报之间发生，这似乎表明图像更改是由不透明度更改引起的。因此，有人可以解释为什么它没有按照我的期望去做吗？谢谢。编辑：更多代码： HTML（这是唯一受影响的部分）：

<div style=\"position: relative;\">
<img src=\"images/sunset.jpg\" id=\"slide\" />
<img src=\"images/website6.jpg\" id=\"slidebg\" />
</div>

CSS：＃滑动{ 显示：块; 左边距：5; 右边距：自动；边框：1px纯黑色； z索引：1；顶部：0px；职位：相对 } #slidebg { 显示：块; margin-left：auto; 右边距：自动；边框：1px纯黑色； z索引：0；顶部：0px；位置：绝对； }

已邀请:

3 个回复

帆攀缺锯欧

为格式化而回答。我还没有调试看什么可行，但这对我来说更有意义如果要使用ID，请使用document.getElementById，如果要使用名称，请使用document.images [imgname]或document.imagename 您也在混合名称和样式。 document.slide.stylebg.opacity等这会有所作为。不确定它是否是您想要的：http://jsfiddle.net/EcShW/2/

<div style=\"position: relative;\">
<img src=\"images/sunset.jpg\" id=\"slide\" name=\"slide\" />
<img src=\"images/website6.jpg\" id=\"slidebg\" name=\"slidebg\" />
</div>


    var images = []; // can be more elegant, but this is simpler
    images[0]=new Image(); images[0].src=\"images/website6.jpg\";
    images[1]=new Image(); images[1].src=\"images/website7.jpg\";
    images[2]=new Image(); images[2].src=\"images/sunset.jpg\"; 
    var tid1,tid2,tid3
    tid1=setTimeout(function() { fade(images,0); }, 2000);
    function delay(arr,num)
    {
        document.slide.src = arr[num % 3].src;
        document.slide.style.opacity = 1;
        document.slidebg.style.opacity = 0;
        document.slidebg.src = arr[(num+1)%3].src;
        var number = num + 1;
        tid2=setTimeout(function() { fade(arr,number); }, 2000);
    }
    function fade(arr,num)
    {
        document.slide.style.opacity -= 0.1
        document.stylebg.style.opacity += 0.1
        if (document.slide.style.opacity == 0)
        {
            tid3=setTimeout(function() { delay(arr,num); }, 150);
        }
        else
        {
            tid3=setTimeout(function() { fade(arr,num); }, 1500);
        }
    }

响摔衅幸

您不能只通过\“ id \”值来引用页面元素；您必须使用\“ document.getElementById（）\”：

 var slideElement = document.getElementById(\'slide\'), slidebgElement = document.getElementById(\'slidebg\');

然后，您将使用\“ slideElement.style \”等，而不是\“ document.slide.style \”。

膛嵌墒缅欠

编辑2 它对我有用（铬）

var images = new Array ();
images[0] = new Image();
images[0].src = \"images/website6.jpg\";
images[1] = new Image();
images[1].src = \"images/website7.jpg\";
images[2] = new Image();
images[2].src = \"images/sunset.jpg\";

function delay ( arr, num )
{
  slide.src = arr[num % 3].src;
  slide.style.opacity = 1;
  slidebg.style.opacity = 0;
  slidebg.src = arr[(num+1)%3].src;
  var number = num + 1;
  setTimeout(function() { fade(arr,number); }, 2000);
}

function fade(arr, num)
{
  if ( slide.style.opacity == 0 )
  setTimeout(function (){ delay(arr, num); }, 150);
  else
  {
    slide.style.opacity = (slide.style.opacity*10 - 1)/10 ;
    slidebg.style.opacity -= -0.1;
    setTimeout ( function(){fade(arr,num);}, 1500 );
  }
}
fade (images, 0);

啊！ chromium9ѭ，即使是铬也可以by10ѭ 好吧，好吧，删除了指向我们在WEB DEV网站上导致我们失败的链接。

要回复问题请先登录或注册

Javascript递归问题

3 个回复

发起人

opacity

javascript

html

recursion

问题状态

Javascript递归问题

与内容相关的链接

3 个回复

发起人

opacity

javascript

html

recursion

问题状态