Creating a JQuery Slideshow of a Background-Image
<p>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:</p>

<pre><code>&lt;table id="bannerTable" border="0" cellpadding="0" cellspacing="0" style="width:640px; height:480px;"&gt;
  &lt;tr&gt;&lt;td style="padding-top:20px; padding-left:300px;"&gt;
    &lt;div&gt;[Some Text]&lt;/div&gt;
  &lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td style="vertical-align:bottom; padding-bottom:20px;"&gt;
    &lt;div&gt;[Site Menu Goes Here]&lt;/div&gt;
  &lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;

  &lt;script type="text/javascript"&gt;
    $(document).ready(function () {
      $("#bannerTable").loadBGImage("/picture1.png");
    });

    $.fn.loadBGImage = function (url) {
      var t = this;
      $('&lt;img /&gt;')
        .attr('src', url)
        .load(function () {
          t.each(function () {
            $(this).hide();
            $(this).css('backgroundImage', 'url(' + url + ')');
            $(this).fadeIn();
          });
        });
      return this;
    }
  &lt;/script&gt;
</code></pre>

<p>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. </p>

<p>How do I do this with jQuery?</p>
