頁面背景上的jQuery/javascript幻燈片

-1

這是一個微不足道的問題，我最近2個小時搜索了它，並得到了很多結果。我的問題是我必須創建一個幻燈片與背景圖像。但不幸的是他們中沒有人爲我工作100％。的代碼，我試圖將最後一塊，頁面背景上的jQuery/javascript幻燈片

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

幻燈片是好的，但是當你看到他們前面加上圖像以身體不讓它背景，而需要單獨的空間吧。我試着在slideshowFadeIn()功能設置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+')';

，但他們沒有工作。我也嘗試了超大型和其他一些插件，但它們並不適合我想要的東西。

我一直在嘗試幾個小時，現在需要一些幫助。非常感謝！

編輯：的jsfiddle鏈接：http://jsfiddle.net/TtFmr/

來源

2013-07-10 Fallen

快速創建一個jsfiddle需要很多工作，以便我或其他人可以搗亂它嗎？ http://jsfiddle.net/ – Joseph

@約瑟夫：對不起，我遲到了。 [小提琴鏈接]（http://jsfiddle.net/TtFmr/）添加到問題。 – Fallen

試試我在下面添加的答案...... @Fallen – Joseph

如果我理解正確你的問題......你正試圖把文本後面的幻燈片？

如果是這樣那就試試這個http://jsfiddle.net/TtFmr/4/

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

有許多方法來定位你的幻燈片，但其定位的「正確」的方式將取決於您的具體情況。

來源

2013-07-11 00:25:13 Joseph

你爲'img'設置了樣式，但是在身體上還有一些其他圖像也會被改變。你能提出任何解決辦法嗎？ – Fallen

@Fallen http://jsfiddle.net/TtFmr/4/請確保您使用「img.slideshowimage」詩句「img」...我將其包含在我的答案中，但忘記將其包含在jsfiddle中...我更新了我的jsfiddle鏈接 – Joseph

非常感謝您的幫助:-) +1和Accepted :) – Fallen

頁面背景上的jQuery/javascript幻燈片

回答

相關問題