Question

这是一个微不足道的问题，我在过去2个小时内搜索过它并得到了很多结果。我的问题是我要创建一个带有背景图片的幻灯片。但不幸的是，他们都没有100％为我工作。我尝试的最后一段代码是，

<script type="text/javascript">
    var images=new Array('images/home.png','images/home02.png','images/home03.png');
    var nextimage=0;

    doSlideshow();

    function doSlideshow()
    {
        if(jQuery('.slideshowimage').length!=0){
            jQuery('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();jQuery(this).remove()});
    }
    else{
        slideshowFadeIn();
    }
}
function slideshowFadeIn(){
    jQuery('body').prepend(jQuery('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none;z-index:-1">').fadeIn(500,function(){setTimeout(doSlideshow,3000);}));
    if(nextimage>=images.length)
       nextimage=0;
}

幻灯片放映很好，但正如您所看到的那样，将图像添加到正文并不会使其成为背景而是为它添加单独的空间。我尝试过设置z-index:-1和

src=jQuery('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none;z-index:-1">').fadeIn(500,function(){setTimeout(doSlideshow,3000);});
jQuery('body').css('backgroundImage','url('+src+')';

slideshowFadeIn()函数中的

，但它们都不起作用。我也尝试过超大化和其他一些插件，但它们并不适合我想要的东西。

我已经尝试了几个小时，现在需要一些帮助。非常感谢！

编辑：JSFiddle链接：http://jsfiddle.net/TtFmr/

Answer 1

如果我正确理解你的问题......你是想把幻灯片放在文本后面吗？

如果是，请尝试此http://jsfiddle.net/TtFmr/4/

 img.slideshowimage {
     z-index: -1;
     position: absolute;
     top:0px;
     left:0px;
     display: block;
 }

定位幻灯片的方法有很多，但定位它的“正确”方式取决于您的具体情况。

页面背景上的jQuery / javascript幻灯片

1 个答案: