Автоматическая смена фона/картинки без перезагрузки страницы
|
|
[16] likbezz [27.01.2012, 17:31] |
Alex86, Quote (Alex86) Не получаеться. Шапка съезжает в низ. Мне кажеться это потому что все блоки в css настраиваються. При добавлении в html в любое место в любой блок, не работает и дизайн плывёт. Что подставляете? Куда подставляете? В этой теме, как минимум два варианта скрипта. Какой используете. Ссылка на страницу где пробуете тоже не помешала бы. ... |
|
[17] Alex86 [27.01.2012, 17:56] |
Так, скрипт заработал. Но куда вставить это: <div id="showImg"></div> ? На фон не устанавливаеться.Добавлено (27.01.2012, 17:56) --------------------------------------------- Вставил скрипт из первого поста в html "Страницы сайта" перед </head>. А вот это <div id="showImg"></div> кудо не вставлял не хочет фон переключать. Либо шапку либо футер либо ещё что нибудь, но не фон. Тестовый сайт: http://leg-equilibrium.clan.su |
|
[18] likbezz [27.01.2012, 18:24] |
Alex86, Quote (Alex86) Вставил скрипт из первого поста в html "Страницы сайта" перед </head>. А вот это <div id="showImg"></div> кудо не вставлял не хочет фон переключать. Либо шапку либо футер либо ещё что нибудь, но не фон. Нет, такой вариант вам не подойдёт. Вот этот скрипт, в верхний глобальный блок, в самый низ. Code <script type="text/javascript"> var imgBg=new Array(); imgBg[0]='http://likbezz.ru/_example/rotator/psBg.gif'; imgBg[1]='http://likbezz.ru/_example/rotator/psBg-e.gif'; imgBg[2]='http://likbezz.ru/_example/rotator/psBg-g.gif'; imgBg[3]='http://likbezz.ru/_example/rotator/psBg-r.gif'; imgBg[4]='http://likbezz.ru/_example/rotator/psBg-b.gif'; imgBg[5]='http://likbezz.ru/_example/rotator/psBg-gb.gif'; imgBg[6]='http://likbezz.ru/_example/rotator/psBg-s.gif'; showImg=function(){ document.getElementById('header').style.backgroundImage='url('+imgBg[Math.floor(Math.random()*(imgBg.length))]+')'; } setInterval(showImg,8000); window.onload=showImg; </script> Картинки меняем на свои. Тот скрипт что сейчас на тестовой странице - убираем, блок «showImg» - тоже. |
|
[19] Alex86 [27.01.2012, 18:34] |
Так вроде работает. А почему картинки маленькие, не на весь фон сайта? Нужно что то добавить? |
|
[20] likbezz [27.01.2012, 20:45] |
Alex86, Quote (Alex86) А почему картинки маленькие, не на весь фон сайта? А при чём здесь фон сайта? Ты же, вроде, про шапку писал? Для фона боди - назначь боди ID и поправь в скрипте ID на свой - назначенный тегу «body» ... Вот здесь: Quote (JS) document.getElementById('header') или просто замени строку на: Quote (JS) document.getElementsByTagName('body')[0].style.backgroundImage='url('+imgBg[Math.floor(Math.random()*(imgBg.length))]+')'; ... |
|
[21] Alex86 [27.01.2012, 21:57] |
Вот эта связка работает, фон фиксирован и меняеться при обновлении страницы
"Страницы сайта" вместо <body> Code <body onload="changemyBack();"> Это в HEADER в самый низ Code <script type="text/javascript">function changemyBack() { var myindex = 0; var mybackgrounds = new Array(6); mybackgrounds[0] = "url('/_example/rotator/logo0.jpg')"; mybackgrounds[1] = "url('/_example/rotator/logo1.jpg')"; mybackgrounds[2] = "url('/_example/rotator/logo2.jpg')"; mybackgrounds[3] = "url('/_example/rotator/logo3.jpg')"; mybackgrounds[4] = "url('/_example/rotator/logo4.jpg')"; mybackgrounds[5] = "url('/_example/rotator/logo5.jpg')"; myindex = Math.floor(Math.random()*6); document.body.style.backgroundImage = mybackgrounds[myindex]; } </script>
А как сюда добавить чтоб автоматически менялся фон?
Добавлено (27.01.2012, 21:02) --------------------------------------------- <body> прописывал - не работало почему то.
Нет не получаеться, работает только вариант с перезагрузкой. Ладно Антон спасибо за подсказку, буду разбираться.
Сообщение отредактировал Alex86 - Пятница, 27.01.2012, 22:46 |
|
[22] likbezz [28.01.2012, 06:21] |
Alex86, Quote (Alex86) А как сюда добавить чтоб автоматически менялся фон? Code <script type="text/javascript"> var imgBg=new Array(); imgBg[0]='http://likbezz.ru/_example/rotator/psBg.gif'; imgBg[1]='http://likbezz.ru/_example/rotator/psBg-e.gif'; imgBg[2]='http://likbezz.ru/_example/rotator/psBg-g.gif'; imgBg[3]='http://likbezz.ru/_example/rotator/psBg-r.gif'; imgBg[4]='http://likbezz.ru/_example/rotator/psBg-b.gif'; imgBg[5]='http://likbezz.ru/_example/rotator/psBg-gb.gif'; imgBg[6]='http://likbezz.ru/_example/rotator/psBg-s.gif'; showImg=function(){ document.getElementsByTagName('body')[0].style.backgroundImage='url('+imgBg[Math.floor(Math.random()*(imgBg.length))]+')'; } setInterval(showImg,8000); window.onload=showImg; </script> |
|
[23] Alex86 [28.01.2012, 20:41] |
О заработало. Спасибо огромное. Осталось свои картинки поставить. Спасибо ещё раз. Ты молодец Антон.Добавлено (28.01.2012, 20:35) --------------------------------------------- Антон а можно всё это дело сделать так чтоб оно масштабировалось под разное разрешение монитора? Какой размер картинки лучше использовать? Добавлено (28.01.2012, 20:41) --------------------------------------------- Вот глянь что получилось: основной сайт |
|
[24] likbezz [28.01.2012, 20:57] |
Alex86, Quote (Alex86) Антон а можно всё это дело сделать так чтоб оно масштабировалось под разное разрешение монитора? Можно: Code body{ background:transparent url(/_source/rnd.jpg) no-repeat 50% 50% fixed; -moz-background-size:cover; -o-background-size:102% auto; -webkit-background-size:102% auto; -khtml-background-size:cover; background-size:cover; }
...
Quote (Alex86) Какой размер картинки лучше использовать? Оптимальный )))) Не думаю, что стоит делать больше 100 kb ...
Quote (Alex86) Вот глянь что получилось: основной сайт Ниичего так ... А что за “кусок от чего-то” ....
... ))
|
|
[25] Alex86 [28.01.2012, 21:14] |
Quote (likbezz) А что за “кусок от чего-то” .... Вообще там должен быть правый контейнер. Может не догрузился? |
|
[26] likbezz [28.01.2012, 22:38] |
Alex86, Quote (Alex86) Вообще там должен быть правый контейнер. Может не догрузился? Ага - может его просто запрещено видеть гостям? ... а верхушка осталась ) ...
По теме: Смена фона без перегрузки с анимационными эфектами ... |
|
[27] Гость [17.02.2012, 19:49] |
likbezz, Не пойму куда исчезли мои сообщения! Я писал про плавный переход, между картинками! Был ведь тут код готовый! Зачем удалили? |
|
[28] likbezz [17.02.2012, 20:21] |
Гость,Quote (Гость) Не пойму куда исчезли мои сообщения! Я писал про плавный переход, между картинками! Был ведь тут код готовый! Зачем удалили? ... |
|
[29] Гость [15.03.2012, 23:42] |
Поставил ваш скрипт, всё работает. Но как сделать так - что бы картинка не повторялась с верху-вниз. Пример http://filmstok.ucoz.ru/ |
|
[30] likbezz [16.03.2012, 00:11] |
Гость, Quote (Гость) Поставил ваш скрипт, всё работает. Но как сделать так - что бы картинка не повторялась с верху-вниз. Quote (Code) <body style="background-repeat:no-repeat;"> ... |
|