我有一個元素充當我網站上的橫幅。此橫幅上有HTML內容,但使用高分辨率圖片作爲背景圖片。正因爲如此,我最後加載了背景圖片,並在下載時將其淡入。我的代碼如下所示:創建背景圖片的JQuery幻燈片
<table id="bannerTable" border="0" cellpadding="0" cellspacing="0" style="width:640px; height:480px;">
<tr><td style="padding-top:20px; padding-left:300px;">
<div>[Some Text]</div>
</td></tr>
<tr><td style="vertical-align:bottom; padding-bottom:20px;">
<div>[Site Menu Goes Here]</div>
</td></tr>
</table>
<script type="text/javascript">
$(document).ready(function() {
$("#bannerTable").loadBGImage("/picture1.png");
});
$.fn.loadBGImage = function (url) {
var t = this;
$('<img />')
.attr('src', url)
.load(function() {
t.each(function() {
$(this).hide();
$(this).css('backgroundImage', 'url(' + url + ')');
$(this).fadeIn();
});
});
return this;
}
</script>
即使這樣,我的網站也感覺不到靜態。因此,我想在運行時循環多個高分辨率圖像。這些高分辨率圖像將在bannerTable中用作背景圖像。我希望他們在循環時淡入淡出。
我如何用jQuery做到這一點?