我有一个元素充当我网站上的横幅。此横幅上有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做到这一点?