Как реализовать автоматическую смену фона сайта, по времени?
Т.е. есть, допустим, 5 картинок, bg1.png, bg2.png, bg3.png, bg4.png, bg5.png, хотелось бы чтоб они с заданным промежутком времени, без перезагрузки страницы, вставали на бэкграунд. Такое возможно?
#1
5 октября 2011 в 01:44
#2
5 октября 2011 в 05:01
По средствам javascript habrahabr.ru/blogs/webdev/20646/
#3
5 октября 2011 в 05:30
Не совсем то.
По средствам javascript habrahabr.ru/blogs/webdev/20646/
Мне надо чтоб менялось по таймеру, а не по часам.
Т.е. авто-смена БЕЗ перезагрузки страницы, раз в минуту.
Сегодня в 06:04
Я сделал!!! Я молодец!
Вот код:
А это в CSS:
http://ironcam.info-lan.me/
Там же можно посмотреть результат работы над сменой фона. Картинки будут другие, и время смены фона будет больше(сейчас 3 секунды. а будет 30).
Вот код:
<img src="" alt="background" id="bg" style="display:none" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script type="text/javascript" class="noprint"> var iPrev = -1; var iRnd = -1; aImages[0] = "templates/_default_/images/bg/bg.jpg"; aImages[1] = "templates/_default_/images/bg/bg1.jpg"; aImages[2] = "templates/_default_/images/bg/bg2.jpg"; aImages[3] = "templates/_default_/images/bg/bg3.jpg"; $(document).ready(function() { $("img#bg").load(function() { $("img#bg").fadeTo(2000,1); setTimeout(function() { $("#image_description").animate({right: '-=150'}, 1000); $("img#bg").fadeOut(2000); setTimeout(LoadImages,3000); } ,3000); } ) setTimeout(LoadImages,100); }); function LoadImage(iNr) { $("img#bg").attr("src", aImages[iNr]); }; function LoadImages() { /* Select a random image number and make sure this is not equal to the previous image */ while(iPrev == iRnd) { } /* Show the selected image */ LoadImage(iRnd); iPrev = iRnd; }; </script>
img#bg { /* Stretch background */ position: fixed; top:0; left:0; width:100%; z-index:-3; }
Там же можно посмотреть результат работы над сменой фона. Картинки будут другие, и время смены фона будет больше(сейчас 3 секунды. а будет 30).
Хорошая штука… Спасибо. Пригодится.
Вот только при переходе по демо-ссылке мне показалось, что смена фона происходит неравномерно:
— временная пауза между изображениями то короткая, то длинная
— смена происходит то с эффектом, то без
Это настраивается?
Вот только при переходе по демо-ссылке мне показалось, что смена фона происходит неравномерно:
— временная пауза между изображениями то короткая, то длинная
— смена происходит то с эффектом, то без
Это настраивается?
#6
5 октября 2011 в 23:48
О! Здорово! Оба варианта интересные.
#7
6 октября 2011 в 00:03
Greener, скорее всего, дело в размере картинки, они очень большие…
#8
6 октября 2011 в 00:36
Ясно. Буду разбираться. Спасибо.
Кстати, второй вариант тоже по-своему хорош:
Кстати, второй вариант тоже по-своему хорош:
Кто-нибудь пробовал на практике?По средствам javascript habrahabr.ru/blogs/webdev/20646/
#9
6 октября 2011 в 00:36
Действительно здорово. iron_cam, для какой версии сделано?
Владимир, ну, у меня 1.8, но вообще, должно работать на всех версиях, т.к. не зависит от cms вообще.
пс
Залил в блог
Да, на моем сайте, немного измененный код. Т.к. не хотел чтоб пользователи видели заливку при смене картинки, по этому там 5я картинка(обычный бэкграунд в css).
пс
Залил в блог
Да, на моем сайте, немного измененный код. Т.к. не хотел чтоб пользователи видели заливку при смене картинки, по этому там 5я картинка(обычный бэкграунд в css).
#11
7 октября 2011 в 12:02
Хорошая весчь! Плюсанул в блоге.
Не подскажешь максимум setTimeout(LoadImages,3000) за который лучше не выставлять?
Не подскажешь максимум setTimeout(LoadImages,3000) за который лучше не выставлять?
ded-pikto, ну, у меня стоит 30000(в блоге, тоже 30000), т.е. 30 секунд.
Максимума нет, просто смысл делать меняющийся фон, который раз в год меняться будет? Отчет то идет с момента загрузки страницы.
Максимума нет, просто смысл делать меняющийся фон, который раз в год меняться будет? Отчет то идет с момента загрузки страницы.