JavaScript递归问题

Question

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

#slide{
    display:block;
    margin-left:5;
    margin-right:auto;
    border: 1px solid black;
    z-index: 1;
    top: 0px;
    position: relative;
}
#slidebg{
    display:block;
    margin-left:auto;
    margin-right:auto;
    border: 1px solid black;
    z-index: 0;
    top: 0px;
    position: absolute;
}

Answer 1

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

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

然后，您将使用“ slideElement.style”等代替“ document.slide.style”。

Answer 2

为格式化而回答。 我还没有调试看什么可行，但这对我来说更有意义

如果要使用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);
        }
    }

Answer 3

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

---

啊！

<img id="img_id"/>即使在铬<img id="img_id"/>我们也可以通过document.img_id获得

---

---

好吧，好吧，删除了指向我们在WEB DEV网站上导致我们失败的链接。