背景圖片jQuery幻燈片

即：

$(function() { 
    $("#bannerTable").loadBGImage(); 
    setInterval('$("#bannerTable").loadBGImage()', 5000); 
}); 

$.fn.loadBGImage = function() { 
    var images = ["home_photo_welshboy.jpg", "home_photo_jam343.jpg", "home_photo_xdjio.jpg", "home_photo_ccgd.jpg"]; 
    var image = images[Math.floor(Math.random() * images.length)]; 
    return this.each(function() { 
     var $obj = $(this); 
     $obj.fadeOut(500,function() { 
      $obj.css('background', 'url(http://l.yimg.com/g/images/' + image + ')').fadeIn(500); 
     }); 
    }); 
}

有幾件事情我想改變，我似乎無法左右我的頭。首先，我想要幻燈片加載下一張圖片，而不是隨機圖片。其次，我需要div的子元素始終可見並且不會與父元素一起褪色。

任何提示如何做到這一點？

來源

2011-05-30 konkretmusik

對不起，我不太明白。但主分區的大小是770 x 350像素。然而，最重要的是下一個圖像特徵。 – konkretmusik 2011-05-30 14:18:35

我希望它自動更改。 – konkretmusik 2011-05-30 14:28:25

請告訴我如何。 – konkretmusik 2011-05-30 14:41:49

最簡單的方法：創建一個全局變量。

var currentPic = 0; 
$(function() { 
    $("#bannerTable").loadBGImage(); 
    setInterval('$("#bannerTable").loadBGImage()', 5000); 
}); 

$.fn.loadBGImage = function() { 
    var images = ["home_photo_welshboy.jpg", "home_photo_jam343.jpg", "home_photo_xdjio.jpg", "home_photo_ccgd.jpg"]; 
    var image = images[currentPic]; 
    currentPic = (currentPic+1)%images.length; //loop once you reach last pic. 
    [...]

其次，在隱藏父項的情況下顯示子項是不可能的。就拿例如：

<div style="display:none">hide me<span style="display:block">show me</span></div>

的孩子會被隱藏起來，因爲它是內父。要解決這個問題，你可以讓他們在一個新的父母（<div><div /><span /></div>）中的兄弟姐妹。

來源

2011-05-30 16:48:54 Kraz

背景圖片jQuery幻燈片

回答

相關問題