创建背景图像的JQuery幻灯片 [英] Creating a JQuery Slideshow of a Background-Image
问题描述
我有一个元素充当网站上的标语.此横幅上有HTML内容,但使用高分辨率图片作为背景图像.因此,我要最后加载背景图像,并在下载背景图像时使其逐渐消失.我的代码如下:
I have an element that serves as the banner on my website. This banner has HTML content on it, but uses a high-resolution picture as the background-image. Because of this, I'm loading the background-image last and fading it in when it has been downloaded. My code looks like this:
<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中用作背景图像.我希望它们在循环时淡入和淡出.
Even with this, my website feels static. Because of this, I want to loop through multiple high-resolution images at runtime. These high-resolution images will be used in the bannerTable as the background-image. I want them to fade-in and fade-out as they loop.
我该如何使用jQuery?
How do I do this with jQuery?
推荐答案
- DEMO: http://so.devilmaycode.it/creating-a-jquery-slideshow-of-a-background-image
在演示源中查找完整的工作代码
look the demo source for the full working code
这篇关于创建背景图像的JQuery幻灯片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!