Создание JQuery Слайд-шоу фонового изображения

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

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

посмотреть демонстрационный источник для полного рабочего кода

Answer 2

В основном использовать setInterval для вызова loadBGImage, скажем каждые 60 секунд.

например. что-то вроде

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