Автоматическая смена фона

 
Посетитель
small user social cms
Сообщений: 45
Как реализовать автоматическую смену фона сайта, по времени?
Т.е. есть, допустим, 5 картинок, bg1.png, bg2.png, bg3.png, bg4.png, bg5.png, хотелось бы чтоб они с заданным промежутком времени, без перезагрузки страницы, вставали на бэкграунд. Такое возможно?
Просто школьный сис админ-бюджетник)))
http://co167.ru/
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 684
По средствам javascript http://habrahabr.ru/blogs/webdev/20646/
Реклама
cms
Посетитель
small user social cms
Сообщений: 45
walterz:

По средствам javascript http://habrahabr.ru/blogs/webdev/20646/
Не совсем то.
Мне надо чтоб менялось по таймеру, а не по часам.
Т.е. авто-смена БЕЗ перезагрузки страницы, раз в минуту.
Просто школьный сис админ-бюджетник)))
http://co167.ru/
Посетитель
small user social cms
Сообщений: 45
Я сделал!!!! Я молодец!
Вот код:
Код PHP:
  1. <img src="" alt="background" id="bg" style="display:none" />
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  3. <script type="text/javascript" class="noprint">
  4. var aImages = new Array();
  5. var aURL = new Array();
  6. var aArtists = new Array();
  7. var iPrev = -1;
  8. var iRnd = -1;
  9.  
  10. aImages[0] = "templates/_default_/images/bg/bg.jpg";
  11. aImages[1] = "templates/_default_/images/bg/bg1.jpg";
  12. aImages[2] = "templates/_default_/images/bg/bg2.jpg";
  13. aImages[3] = "templates/_default_/images/bg/bg3.jpg";
  14.  
  15.  
  16.  
  17.  
  18. $(document).ready(function() {
  19.  
  20.  
  21. $("img#bg").load(function()
  22. {
  23.  
  24. $("img#bg").fadeTo(2000,1);
  25.  
  26.  
  27.  
  28. setTimeout(function()
  29. {
  30. $("#image_description").animate({right: '-=150'}, 1000);
  31. $("img#bg").fadeOut(2000);
  32.  
  33.  
  34. setTimeout(LoadImages,3000);
  35. }
  36. ,3000);
  37. }
  38. )
  39.  
  40.  
  41. setTimeout(LoadImages,100);
  42.  
  43. });
  44.  
  45. function LoadImage(iNr)
  46. {
  47. $("img#bg").attr("src", aImages[iNr]);
  48. };
  49.  
  50. function LoadImages()
  51. {
  52.  
  53. /* Select a random image number and make sure this is not equal to the previous image */
  54. while(iPrev == iRnd)
  55. {
  56. iRnd = Math.floor(Math.random()*aImages.length);
  57. }
  58.  
  59. /* Show the selected image */
  60. LoadImage(iRnd);
  61.  
  62. iPrev = iRnd;
  63.  
  64. };
  65. </script>
А это в CSS:
Код PHP:
  1. img#bg {
  2. /* Stretch background */
  3. position: fixed;
  4. top:0;
  5. left:0;
  6. width:100%;
  7. z-index:-3;
  8. }
http://ironcam.info-lan.me/
Там же можно посмотреть результат работы над сменой фона. Картинки будут другие, и время смены фона будет больше(сейчас 3 секунды. а будет 30).
Редактировалось: 2 раз (Последний: 5 октября 2011 в 21:28)
Просто школьный сис админ-бюджетник)))
http://co167.ru/
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 277
Хорошая штука... Спасибо. Пригодится.
Вот только при переходе по демо-ссылке мне показалось, что смена фона происходит неравномерно:
- временная пауза между изображениями то короткая, то длинная
- смена происходит то с эффектом, то без

Это настраивается?
Редактировалось: 1 раз (Последний: 5 октября 2011 в 22:23)
Копирайтинг, рерайтинг, постинг, контент-менеджмент, модерирование и т. д. и т. п. Обращайтесь!
Посетитель
small user social cms
МедальКубок зрительских симпатийПочетный донор проекта
Сообщений: 713
О! Здорово! Оба варианта интересные.
Посетитель
small user social cms
Сообщений: 45
Greener, скорее всего, дело в размере картинки, они очень большие...
Просто школьный сис админ-бюджетник)))
http://co167.ru/
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 277
Ясно. Буду разбираться. Спасибо.
Кстати, второй вариант тоже по-своему хорош:
walterz:
По средствам javascript http://habrahabr.ru/blogs/webdev/20646/
Кто-нибудь пробовал на практике?
Копирайтинг, рерайтинг, постинг, контент-менеджмент, модерирование и т. д. и т. п. Обращайтесь!
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 455
Действительно здорово. iron_cam, для какой версии сделано?
Спортивный стиль – это модно!
Посетитель
small user social cms
Сообщений: 45
Владимир, ну, у меня 1.8, но вообще, должно работать на всех версиях, т.к. не зависит от cms вообще.
пс
Залил в блог

Да, на моем сайте, немного измененный код. Т.к. не хотел чтоб пользователи видели заливку при смене картинки, по этому там 5я картинка(обычный бэкграунд в css).
Редактировалось: 1 раз (Последний: 6 октября 2011 в 00:49)
Просто школьный сис админ-бюджетник)))
http://co167.ru/
Посетитель
small user social cms
Медаль
Сообщений: 177
Хорошая весчь! Плюсанул в блоге.
Не подскажешь максимум setTimeout(LoadImages,3000) за который лучше не выставлять?
Посетитель
small user social cms
Сообщений: 45
ded-pikto, ну, у меня стоит 30000(в блоге, тоже 30000),т.е. 30 секунд.
Максимума нет, просто смысл делать меняющийся фон, который раз в год меняться будет? Отчет то идет с момента загрузки страницы.
Редактировалось: 1 раз (Последний: 7 октября 2011 в 18:07)
Просто школьный сис админ-бюджетник)))
http://co167.ru/
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.