Т.е. есть, допустим, 5 картинок, bg1.png, bg2.png, bg3.png, bg4.png, bg5.png, хотелось бы чтоб они с заданным промежутком времени, без перезагрузки страницы, вставали на бэкграунд. Такое возможно?
Не совсем то.
По средствам javascript habrahabr.ru/blogs/webdev/20646/
Мне надо чтоб менялось по таймеру, а не по часам.
Т.е. авто-смена БЕЗ перезагрузки страницы, раз в минуту.
Вот код:
<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).
Вот только при переходе по демо-ссылке мне показалось, что смена фона происходит неравномерно:
— временная пауза между изображениями то короткая, то длинная
— смена происходит то с эффектом, то без
Это настраивается?
Кстати, второй вариант тоже по-своему хорош:
Кто-нибудь пробовал на практике?По средствам javascript habrahabr.ru/blogs/webdev/20646/
пс
Залил в блог
Да, на моем сайте, немного измененный код. Т.к. не хотел чтоб пользователи видели заливку при смене картинки, по этому там 5я картинка(обычный бэкграунд в css).
Не подскажешь максимум setTimeout(LoadImages,3000) за который лучше не выставлять?
Максимума нет, просто смысл делать меняющийся фон, который раз в год меняться будет? Отчет то идет с момента загрузки страницы.