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，如果要使用name，请使用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

EDIT2

它对我有用（铬）

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

AHA！

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

中也是如此

好的，好的，删除了指向此 WE TEACH YOU TO FAIL AT WEB DEV 网站的链接..

Javascript递归问题

3 个答案: