Question

我有一个元素作为我网站上的横幅。此横幅上有HTML内容，但使用高分辨率图片作为背景图片。因此，我在最后加载背景图像并在下载时将其淡入。我的代码如下所示：

<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执行此操作？

Answer 1

基本上使用setInterval来调用loadBGImage，比如说每60秒。

e.g。

之类的东西

var interval = 0;
var intervalTimer = setInterval(
    function(){
        if (++interval > 10) {interval = 1}
        $("#bannerTable").loadBGImage("/picture" + interval + ".png");
    }
    ,
    60000
);

Answer 2

DEMO： http://so.devilmaycode.it/creating-a-jquery-slideshow-of-a-background-image

查看完整工作代码的演示源

创建背景图像的JQuery幻灯片

2 个答案: