Создайте цикл фонового изображения с помощью jQuery

Question

, работающий на веб-сайте, где клиенту требуется «фоновое изображение» веб-сайта для просмотра трех изображений.

Теперь я создал циклы перед (или установленными плагинами) для циклического перехода через теги img ... но не создал функцию jQuery, которая связывается с css div и дает ему новое изображение, которое «исчезает» каждые 7 секунд ...

Есть ли у кого-нибудь идеи, как это сделать ???

---

Теперь я хотел бы иметь образы исчезают через, как IMG теги в DIV, но, к сожалению, это не может быть сделано в этом случае, как DIV, который имеет изменяющиеся фоновые изображения изменяемого размера, и имеет изображения гораздо шире, чем то, что нужно быть расположено в центре его - Hense с помощью CSS-оБРАЗА положения: центральный тег ...

спасибо за помощь

---

Answer 1

Я видел, что вы не предпочитаете сделайте это с помощью div, но вы можете анимировать только цвет фона. Вот мое решение проблемы. Я использовал два изображения, поэтому вам нужно добавить один URL-адрес в массив и изменить count % 2 на count % 3, чтобы вписаться в ваш случай (с тремя разными изображениями для фона). Вот скрипка: http://jsfiddle.net/5uBej/4/

И источник:

JS

(function ($) { 
    var images = ['http://silviahartmann.com/background-tile-art/images/fire_flame/fire_seamless_background_2.jpg', 'http://www.myinkblog.com/wp-content/uploads/2008/06/polaroid-background.jpg'], 
     count = 0, 
     timeout, interval = 1500; 

    $('#foo').width($(document).width()); 
    $('#foo').height($(document).height()); 

    (function changeBackground() { 
     timeout = setTimeout(function() { 
      $('#foo').fadeOut(function() { 

       if (count === 100) { 
        count = 0; 
       } 
       $('#foo').css('background-image', 'url(' + images[count % 2] + ')'); 
       $('#foo').fadeIn(); 
       count += 1; 
       changeBackground(); 
      }); 
     }, interval); 
    }()); 
}($)); 

CSS

.foo { 
    position: absolute; 
    background-image: url(http://www.myinkblog.com/wp-content/uploads/2008/06/polaroid-background.jpg); 
    left: 0px; 
    top: 0px; 
    z-index: -2147483648; 
} 
.content { 
    background: #ccc; 
    margin: auto; 
    margin-top: 10px; 
    width: 350px; 
    height: 350px; 
    z-index: 100; 
    padding: 10px; 
    border: 1px solid black; 
} 
h1 { 
    margin: auto; 
    margin-bottom: 10px; 
    text-align: center; 
    font-size: 30px;  
} 

HTML

<div class="foo" id="foo"></div> 

<div class="content"> 
    <h1>Sample header</h1> 
    Sample content here... 
</div> 

Я надеюсь, что эти строки кода помогли вам :-).

С уважением.