Question

我正在尝试将淡入淡出效果应用于javascript背景幻灯片。当我改变了值时，JS忽略了它。我尝试了fadeIn和fadeOut。这段代码有什么问题？

var bgimages=new Array()
bgimages[0]="tenis.jpg"
bgimages[1]="rtrr.jpg"
bgimages[2]="tenis.jpg"

//preload images
var pathToImg=new Array()
for (i=0;i<bgimages.length;i++) {
    pathToImg[i]=new Image()
    pathToImg[i].src=bgimages[i]
}
var inc=-1

function bgSlide() {
    if (inc<bgimages.length-1)
        inc++
    else
        inc=0

    document.body.background=pathToImg[inc].src
}

if (document.all||document.getElementById)
    window.onload=new Function('bgSlide(); setInterval("bgSlide()",3000),fade(2000)')

Answer 1

您无法淡化背景图像。您可以使用<img>标记淡化图片。

这是我的jsFiddle DEMO。

以下是一些示例代码（包括JQuery，CSS和HTML）：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
img{
    position:absolute;
    top:0;
    display:none;
    width:auto;
    height:100%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function fader() {
    $("img").first().appendTo('#wrap').fadeOut(3000);
    $("img").first().fadeIn(3000);    
    setTimeout(fader, 4200);
}
</script>
</head>
<body onLoad="fader();">
<div id="wrap">
<img src="http://stats.hashweb.org/static/img/jsfiddle-logo.png">
<img src="http://startbootstrap.com/templates/freelancer/img/profile.png">
<img src="http://www.silvercoinstoday.com//images/Silver-Element-Atomic-Structure.jpg">
</div>
</body>
</html>

Answer 2

虽然“您无法淡化背景图像”，但您可以淡入淡出DIV，其背景URL是您想要淡化的图像。

然而，上面的演示来自完全otamaamazing，并没有给出想要的结果，其中图像应该从一个到另一个解散，而不是在它们之间留下空白。

背景幻灯片（javascript）淡入过渡效果

2 个答案: