Создать цикл фонового изображения с JQuery - PullRequest
Новая
       22

Создать цикл фонового изображения с JQuery

0 голосов
/ 05 января 2012

работает на веб-сайте, где клиент хочет, чтобы «фоновое изображение» веб-сайта циклически повторялось 3 изображения.

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

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

Теперь я хотел бы, чтобы изображения постепенно исчезали как теги img внутри div, но, к сожалению, этого нельзя сделать в этом случае, так как div, у которого есть изменяющиеся фоновые изображения, имеет изменяемый размер и имеет изображения намного шире, чемэто, что нужно расположить в его центре - хенсе, используя тег css image-position: center ...

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

1 Ответ

0 голосов
/ 05 января 2012

Я видел, что вы не предпочитаете делать это с помощью 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>

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

С уважением.

...