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

#1 5 октября 2011 в 01:44
Как реализовать автоматическую смену фона сайта, по времени?
Т.е. есть, допустим, 5 картинок, bg1.png, bg2.png, bg3.png, bg4.png, bg5.png, хотелось бы чтоб они с заданным промежутком времени, без перезагрузки страницы, вставали на бэкграунд. Такое возможно?
#3 5 октября 2011 в 05:30


По средствам javascript habrahabr.ru/blogs/webdev/20646/

walterz
Не совсем то.
Мне надо чтоб менялось по таймеру, а не по часам.
Т.е. авто-смена БЕЗ перезагрузки страницы, раз в минуту.
#4 5 октября 2011 в 21:27
Я сделал!!! Я молодец!
Вот код:
  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:
  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).
#5 5 октября 2011 в 22:16
Хорошая штука… Спасибо. Пригодится.
Вот только при переходе по демо-ссылке мне показалось, что смена фона происходит неравномерно:
— временная пауза между изображениями то короткая, то длинная
— смена происходит то с эффектом, то без

Это настраивается?
#6 5 октября 2011 в 23:48
О! Здорово! Оба варианта интересные.
#7 6 октября 2011 в 00:03
Greener, скорее всего, дело в размере картинки, они очень большие…
#8 6 октября 2011 в 00:36
Ясно. Буду разбираться. Спасибо.
Кстати, второй вариант тоже по-своему хорош:

По средствам javascript habrahabr.ru/blogs/webdev/20646/

walterz
Кто-нибудь пробовал на практике?
#9 6 октября 2011 в 00:36
Действительно здорово. iron_cam, для какой версии сделано?
#10 6 октября 2011 в 00:47
Владимир, ну, у меня 1.8, но вообще, должно работать на всех версиях, т.к. не зависит от cms вообще.
пс
Залил в блог

Да, на моем сайте, немного измененный код. Т.к. не хотел чтоб пользователи видели заливку при смене картинки, по этому там 5я картинка(обычный бэкграунд в css).
#11 7 октября 2011 в 12:02
Хорошая весчь! Плюсанул в блоге.
Не подскажешь максимум setTimeout(LoadImages,3000) за который лучше не выставлять?
#12 7 октября 2011 в 18:07
ded-pikto, ну, у меня стоит 30000(в блоге, тоже 30000), т.е. 30 секунд.
Максимума нет, просто смысл делать меняющийся фон, который раз в год меняться будет? Отчет то идет с момента загрузки страницы.
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.