Фильтр по:
  

Автоматическая смена фона/картинки без перезагрузки страницы - Страница 2

Вопросы/ответы на тему JQuery и JScript на сайтах в uCoz

  • Страница 2 из 4
  • «
  • 1
  • 2
  • 3
  • 4
  • »
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Вопросы/ответы на тему JQuery и JScript на сайтах в uCoz » Автоматическая смена фона/картинки без перезагрузки страницы (Решение на Java Script...)
Автоматическая смена фона/картинки без перезагрузки страницы
Дата: Пятница, 27.01.2012, 17:31 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Alex86,
Quote (Alex86)
Не получаеться. Шапка съезжает в низ. Мне кажеться это потому что все блоки в css настраиваються.
При добавлении в html в любое место в любой блок, не работает и дизайн плывёт.

Что подставляете? Куда подставляете?
В этой теме, как минимум два варианта скрипта. Какой используете.
Ссылка на страницу где пробуете тоже не помешала бы.
...

 
Дата: Пятница, 27.01.2012, 17:56 |
Alex86
Сержант
Группа: Пользователи
Сообщений: 32
Награды: 0
Репутация: 0
Статус: Offline


 Так, скрипт заработал.
Но куда вставить это: <div id="showImg"></div> ?
На фон не устанавливаеться.

Добавлено (27.01.2012, 17:56)
---------------------------------------------
Вставил скрипт из первого поста в html "Страницы сайта" перед </head>.
А вот это <div id="showImg"></div> кудо не вставлял не хочет фон переключать. Либо шапку либо футер либо ещё что нибудь, но не фон.
Тестовый сайт: http://leg-equilibrium.clan.su

 
Дата: Пятница, 27.01.2012, 18:24 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 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» - тоже.

 
Дата: Пятница, 27.01.2012, 18:34 |
Alex86
Сержант
Группа: Пользователи
Сообщений: 32
Награды: 0
Репутация: 0
Статус: Offline


 Так вроде работает. А почему картинки маленькие, не на весь фон сайта?
Нужно что то добавить?

 
Дата: Пятница, 27.01.2012, 20:45 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 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))]+')';

...

 
Дата: Пятница, 27.01.2012, 21:57 |
Alex86
Сержант
Группа: Пользователи
Сообщений: 32
Награды: 0
Репутация: 0
Статус: Offline


 Вот эта связка работает, фон фиксирован и меняеться при обновлении страницы

"Страницы сайта" вместо <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
 
Дата: Суббота, 28.01.2012, 06:21 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 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>

 
Дата: Суббота, 28.01.2012, 20:41 |
Alex86
Сержант
Группа: Пользователи
Сообщений: 32
Награды: 0
Репутация: 0
Статус: Offline


 О заработало. Спасибо огромное. Осталось свои картинки поставить.
Спасибо ещё раз. Ты молодец Антон.

Добавлено (28.01.2012, 20:35)
---------------------------------------------
Антон а можно всё это дело сделать так чтоб оно масштабировалось под разное разрешение монитора?
Какой размер картинки лучше использовать?

Добавлено (28.01.2012, 20:41)
---------------------------------------------
Вот глянь что получилось: основной сайт

 
Дата: Суббота, 28.01.2012, 20:57 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 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)
Вот глянь что получилось: основной сайт

Ниичего так ...
А что за “кусок от чего-то” ....


... ))
Прикрепления: 0987218.png (24.4 Kb)

 
Дата: Суббота, 28.01.2012, 21:14 |
Alex86
Сержант
Группа: Пользователи
Сообщений: 32
Награды: 0
Репутация: 0
Статус: Offline
Quote (likbezz)
А что за “кусок от чего-то” ....

Вообще там должен быть правый контейнер. Может не догрузился?

 
Дата: Суббота, 28.01.2012, 22:38 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Alex86,
Quote (Alex86)
Вообще там должен быть правый контейнер. Может не догрузился?

Ага - может его просто запрещено видеть гостям? ... а верхушка осталась )
...

По теме: Смена фона без перегрузки с анимационными эфектами
...

 
Дата: Пятница, 17.02.2012, 19:49 |
Группа: Гости





 likbezz,
Не пойму куда исчезли мои сообщения! Я писал про плавный переход, между картинками! Был ведь тут код готовый! Зачем удалили?

 
Дата: Пятница, 17.02.2012, 20:21 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Гость,
Quote (Гость)
Не пойму куда исчезли мои сообщения! Я писал про плавный переход, между картинками! Был ведь тут код готовый! Зачем удалили?

Quote (likbezz)
По теме: Смена фона без перегрузки с анимационными эфектами

...

 
Дата: Четверг, 15.03.2012, 23:42 |
Группа: Гости





 Поставил ваш скрипт, всё работает. Но как сделать так - что бы картинка не повторялась с верху-вниз.
Пример http://filmstok.ucoz.ru/

 
Дата: Пятница, 16.03.2012, 00:11 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Гость,
Quote (Гость)
Поставил ваш скрипт, всё работает. Но как сделать так - что бы картинка не повторялась с верху-вниз.

Quote (Code)
<body style="background-repeat:no-repeat;">

...

 
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Вопросы/ответы на тему JQuery и JScript на сайтах в uCoz » Автоматическая смена фона/картинки без перезагрузки страницы (Решение на Java Script...)
  • Страница 2 из 4
  • «
  • 1
  • 2
  • 3
  • 4
  • »
Поиск:


Мобильная версия