-1

这是一个微不足道的问题，我已经搜索了 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/

4

1 回答 1

2

如果我正确理解了您的问题...您是在尝试将幻灯片放在文本后面吗？

如果是这样，那么试试这个http://jsfiddle.net/TtFmr/4/

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

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

于 2013-07-11T00:25:13.070 回答