Изменение background <html> через неск секунд
Подскажите что-нибудь, желательно на чистом js без использования JQUERY, потому как ни подключаю JQUERY плагины смены фона то не видят JQUERY, то ошибки постоянно возникают!
Хоть что-нибудь подскажите пожалуйста! Хоть изображения из папок, хоть ссылки на них, неважно. Какой-нибудь скрипт для смены background тега <html> (ну или вообще смены background) с определенным интервалом |
|
Помогите допилить скрипт пожалуйста :help:
Сейчас он выглядит так: <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. Очень нужно плавное изменение картинок (затухание первой - появление второй) Люди хэлп :help: |
по первому вопросу - добавьте в строку №10 следующее:
document.body.style.backgroundImage = 'url('+ pictures[0] + ')';
|
deivan,
если в css стоит картинка фона -- зачем она в скрипте - Цитата:
|
а в чем смысл цикла в строках 11-13?..
|
Цитата:
|
<!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>
|
Заметил вот какую штуку: всю разработку веду в Firefox потому как там мой самый любимый firebag, но так для интереса зашел с оперы - И удивился :stop: опера отображает все зашибись! Зашел с хрома - тоже все норм! Получается выделывается Firefox, хотя очень странно версия стоит самая новая!
|
по-секрету: а под ИЕ6-7 вообще обосратушки...
|
| Часовой пояс GMT +3, время: 14:12. |