Форум

razorg1991 · #1 (**permalink**) 27.03.2014, 23:40

Подскажите что-нибудь, желательно на чистом js без использования JQUERY, потому как ни подключаю JQUERY плагины смены фона то не видят JQUERY, то ошибки постоянно возникают!
Хоть что-нибудь подскажите пожалуйста! Хоть изображения из папок, хоть ссылки на них, неважно.
Какой-нибудь скрипт для смены background тега <html> (ну или вообще смены background) с определенным интервалом

рони · #2 (**permalink**) 28.03.2014, 00:00

razorg1991,
Растянуть изображение фоном.

razorg1991 · #3 (**permalink**) 28.03.2014, 10:31

Помогите допилить скрипт пожалуйста

Сейчас он выглядит так:

<script>
        (function(){
            var interval = 1000,
                pictures = [
                    '/bs-server/templates/bs-template/images/background2.jpg',
                    '/bs-server/templates/bs-template/images/background3.jpg',
                    '/bs-server/templates/bs-template/images/background4.jpg',
                    '/bs-server/templates/bs-template/images/background1.jpg'
                ];
            
            for (var i = 0; i < pictures.length; i++) {
                (new Image()).src = pictures[i];
            }
            
            var imageIndex = 0;
            setInterval(function(){
                var image = pictures[imageIndex++] || pictures[imageIndex = 0];
                if (document.addEventListener) {
                    document.body.style.backgroundImage = 'url('+ image + ')';
                } else {
                    document.body.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + image + ', sizingMethod="scale")';
                }
            }, interval);
        })();
        </script>

В принципе все работает, но есть парочку "НО":
1. При загрузке страницы первое фоновое изображение появляется не сразу, а только через время, указанное в скрипте

var interval = 1000

Очень нужно, чтобы картинка появлялась сразу (пробовал в css по умолчанию ставить background одну из картинок, итог - картинка появляется сразу, НО первая ее смена происходит так - background исчезает вовсе, задержка в var interval = 1000 а затем появляются уже остальные. Т.е. данный вариант не прокатил

)

2. Очень нужно плавное изменение картинок (затухание первой - появление второй)

Люди хэлп

deivan · #4 (**permalink**) 28.03.2014, 12:23

по первому вопросу - добавьте в строку №10 следующее:

document.body.style.backgroundImage = 'url('+ pictures[0] + ')';

рони · #5 (**permalink**) 28.03.2014, 12:37

deivan,
если в css стоит картинка фона -- зачем она в скрипте -

Сообщение от razorg1991

background исчезает вовсе,

не смог воспроизвести это

deivan · #6 (**permalink**) 28.03.2014, 12:41

а в чем смысл цикла в строках 11-13?..

рони · #7 (**permalink**) 28.03.2014, 12:50

Сообщение от deivan

а в чем смысл цикла в строках 11-13?..

закешировать все картинки

рони · #8 (**permalink**) 28.03.2014, 12:52

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            html{
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
                background: #fff;
            }
            body{
                min-height: 100%;
                margin: 0;
                padding: 0;
                background-position: top center;
                background-repeat: no-repeat;
                -moz-background-size: 100% 100%;
                -o-background-size: 100% 100%;
                background-size: 100% 100%;
                background-image: url(http://yawall.ru/images/Abstrakciya-oboi-dlya-rabochego-stola-izobrajeniya/1920x1080/50459-Golubovatiy-fon-s-beloy-izognctoy-liniey-1920x1080.jpg);
            }
            p {
                position: fixed;
                top: 50%;
                left: 50%;
                margin-top: -50px;
                margin-left: -100px;
                height: 50px;
                width: 300px;
                color: #FFFFFF;
                font-size:  2em;
            }
        </style>
    </head>
    <body>
        <p>Всякая всячина</p>
        <script>
        (function(){
            var interval = 5000,
                pictures = [
                    'http://imgs.su/tmp/1292024913.jpg',
                    'http://gallery.ykt.ru/galleries/tf2/2012/06/1077057_0.jpg',
                    'http://www.wallgrad.ru/_ph/39/251576366.jpg',
                    'http://yawall.ru/images/Abstrakciya-oboi-dlya-rabochego-stola-izobrajeniya/1920x1080/50459-Golubovatiy-fon-s-beloy-izognctoy-liniey-1920x1080.jpg'
                ];

            for (var i = 0; i < pictures.length; i++) {
                (new Image()).src = pictures[i];
            }

            var imageIndex = 0;
            setInterval(function(){
                var image = pictures[imageIndex++] || pictures[imageIndex = 0];
                if (document.addEventListener) {
                    document.body.style.backgroundImage = 'url('+ image + ')';
                } else {
                    document.body.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + image + ', sizingMethod="scale")';
                }
            }, interval);
        })();
        </script>
    </body>
</html>

razorg1991 · #9 (**permalink**) 28.03.2014, 22:26

Заметил вот какую штуку: всю разработку веду в Firefox потому как там мой самый любимый firebag, но так для интереса зашел с оперы - И удивился

опера отображает все зашибись! Зашел с хрома - тоже все норм! Получается выделывается Firefox, хотя очень странно версия стоит самая новая!

deivan · #10 (**permalink**) 30.03.2014, 16:26

по-секрету: а под ИЕ6-7 вообще обосратушки...

Форум

Справочник

Discord чат

Курсы javascript