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


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

Как и написано в теме, решение на Java Script, следовательно ничего сложного ...

Данный пример меняет фон... Немного подстроив можно сменять что угодно - картинки текст ... Короче, сами решайте ..

Скриншот:

Тестовая версия ниже ... (в прикреплении ...)

Код Java Script:

Quote (Java Script)
<script type="text/javascript">
var sImg = new Array();
sImg[0]="<div style='width:95%;height:200px;background:url(/_example/rotator/psBg.gif);'><strong>«Народная примета: Если сисадмин в 09.00 утра на работе, значит он там ночевал...»</strong><hr><strong>«Народная примета v2.0: Если админ в 9:00 на рабочем месте - значит, сервер не работает...»</strong><hr><strong>«хороший секс - это такой, после которого выходят покурить даже соседи...»</strong></div>";
sImg[1]="<div style='width:95%;height:200px;background:url(/_example/rotator/psBg-b.gif);'><strong>«Не огорчаюсь, если люди меня не понимают, - огорчаюсь, если я не понимаю людей...»</strong><hr><strong>«Сообщение по ICQ: «Ты что молчишь, клавиатуру проглотил?»</strong><hr><strong>«Не говорите программисту: «Заходи, гостем будешь!», порадуйте его возможностью зайти администратором или, в крайнем случае, пользователем...»</strong></div>";
sImg[2]="<div style='width:95%;height:200px;background:url(/_example/rotator/psBg-e.gif);'><strong>«Не ошибается то, что не работает. © Windows...»</strong><hr><strong>«...Коврик для мыши совершил недопустимую операцию и будет свернут...»</strong><hr><strong>«Пешеходы бывают двух типов - шустрые и мертвые...»</strong></div>";
sImg[3]="<div style='width:95%;height:200px;background:url(/_example/rotator/psBg-g.gif);'><strong>«4 Mb - это не память. Это склероз...»</strong><hr><strong>«Win95 как самолёт - тошнит, а выйти некуда...»</strong><hr><strong>«Все знают о том, что в километре 1024 метра, но никто не догадывается, что в минуте 64 секунды...»</strong></div>";
sImg[4]="<div style='width:95%;height:200px;background:url(/_example/rotator/psBg-gb.gif);'><strong>«Глюки - лучшее средство от скуки...»<hr>«Десятиметровый ящик на попе. (10Mb Mailbox POP3)»</strong><hr><strong>«Если глюк оказался вдруг, и не друг и не враг, а баг...»</strong></div>";
sImg[5]="<div style='width:95%;height:200px;background:url(/_example/rotator/psBg-r.gif);'><strong>«Программа выполнила допустимую операцию, но по привычке будет закрыта...»</strong><hr><strong>« - Как запомнить семь цветов радуги?<br>- Каждый Оформитель Желает Знать, Где Скачивают Фотошоп...»</strong><hr><strong>«Клаву топтать - это вам не джойстиком баловаться...»</strong></div>";
sImg[6]="<div style='width:95%;height:200px;background:url(/_example/rotator/psBg-s.gif);'><strong>«Быстро и качественно изготовлю кнопки для дверных звонков в формате GIF или JPEG...»</strong><hr><strong>«Компьютер без мыши, что коммерсант без крыши...»</strong><hr><strong>«Лучше чистить мониторы Кометом. Говорят, он ещё и вирусы убивает...»</strong></div>";
sImg[7]="<div style='width:95%;height:200px;background:url(/_example/rotator/psBg-g.gif);'><strong>«Мораль: Не трогай технику и она тебя не подведёт. Резюме: Если и это не получается, прочтите, наконец, инструкцию...»</strong><hr><strong>«На Новый Год все надели разные маски: кто - зайчика, кто - лисички... И только sysadmin надел свою любимую: 255.255.255.0...»</strong><hr><strong>«Когда программист в первый раз решается напечь блинов(!?), то первый, естественно, получается комом, ну а второй - экзешником!»</strong></div>";
showImg = function(){
var el=document.getElementById("showImg");
el.innerHTML=sImg[Math.floor(Math.random()*sImg.length)];
}
setInterval(showImg,8000);
window.onload=showImg;
</script>

showImg,8000 - Скорость смены контента ...

Код HTML:

Code
<div id="showImg"></div>

<div id="showImg"></div> - вставляем в нужное место сайта ....

Пример .... (Автоматическая смена фона без перезагрузки страницы ... мой вариант ...)

Flesh

Прикрепления: rotator-v8.html (6.3 Kb) · 5018319.png (15.0 Kb)

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


Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<script type="text/javascript" src="http://s29.ucoz.net/src/u.js"></script>
<link type="text/css" rel="StyleSheet" href="http://s29.ucoz.net/src/layer1.css" />
<style type="text/css">
/* StartStyle */
div.header {height:275px;background: url('ССИЛКА') no-repeat 0 0; position: left;}
/* EndStyle */
</style>
</head>

<body>
<div class="header" id="headerImg"></div>
<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';
var rnd = Math.floor(Math.random()*(imgBg.length));  
$('#headerImg').css('background','url('+imgBg[rnd]+') no-repeat 0 0');
</script>
</body>
</html>


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


Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
/* StartStyle */
div.header {height:275px;background: url('ССИЛКА') no-repeat 0 0; position: left;}
/* EndStyle */
</style>
</head>

<body>
<div class="header" id="headerImg"></div>
<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';
var rnd = Math.floor(Math.random()*(imgBg.length));  
document.getElementById('headerImg').style.background='url('+imgBg[rnd]+') no-repeat 0 0';
</script>
</body>
</html>


 
Дата: Вторник, 22.11.2011, 03:20 |
Группа: Гости





Огромное спасибо за этот скрипт! Два дня искал нечто подобное. Но только у Вас нашел именно то, что работает, как положено.
Скрипт просто чудесный. Чуток подредактировал под свои нужды (у меня картинки меняются по очереди, а не случайным образом) и получился идеальный вариант. То, что доктор прописал.
Низкий поклон за науку и подсказку.


 
Дата: Четверг, 08.12.2011, 17:09 |
Группа: Гости





Респект!!))
Очень вовремя нашёл ваш скрипт, именно то, что мне было надо: со случайной сменой картинок без перезагрузки страницы.
Спасибо)


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


Более “ровная” функция showImg() через setTimeout() ...
- Переключает картинку только после её полной загрузки ...

HTML:
Code
<div id="rand_bg" style="height:97px;background:url(/_example/bg/patterns/patt8_6.jpg) repeat 0% 0%;"> </div>


JavaScript:
Code
<script type="text/javascript">
function showImg(){
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';
var u=imgBg[Math.floor(Math.random()*imgBg.length)],c=new Image();c.src=u;
if(!c.complete){c.onload=function(){document.getElementById('rand_bg').style.background='url('+u+') repeat 0% 0%';setTimeout('showImg()',1000);}}else{document.getElementById('rand_bg').style.background='url('+u+') repeat 0% 0%';setTimeout('showImg()',1000);}
};setTimeout('showImg()',1000);
</script>


Пример (rand_bg_1-2)
...

Пример с прозрачностью:
Автоматическая смена фона + прозрачность (Rand_bg 4 + opacity) ...
...


 
Дата: Вторник, 20.12.2011, 20:14 |
Группа: Гости





Как добавить анимацию к этому скрипту ,при переключении изображений ?

 
Дата: Вторник, 20.12.2011, 21:53 |
Группа: Гости





Гость,
Quote (Гость)
Как добавить анимацию к этому скрипту ,при переключении изображений ?

К этому? - никак ...
...


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


Доброго здравия дружище.
Прикольная вещица получаеться,но.....
У меня стандартный дизайн 799 и слегка переделаный. Там всё на ксс. Как там сотворить такое чудо?

html:

CSS:


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


Alex86,
Quote (Alex86)
Доброго здравия дружище.

Доброго)
Quote (Alex86)
У меня стандартный дизайн 799 и слегка переделаный. Там всё на ксс. Как там сотворить такое чудо?

Какое чудо-то? Словами объясни.
...


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


Привет ещё раз.
Да что обьяснять, я всё понял как это работает, но вот как его заставить работать не знаю.
У меня и фон и шапка в ксс сделана. Код я выложил.
Я пробавал и информером и скриптом с автомотической заменой фона, на другом сайте где фон и шапка в html работает, а тут не пойму куда что вставить.
Тестовый сайт: http://leg-equilibrium.clan.su

Добавлено (26.01.2012, 20:46)
---------------------------------------------
Ну так как, можно что нибудь в моём случае сделать ?

Сообщение отредактировал Alex86 - Четверг, 26.01.2012, 18:35
 
Дата: Четверг, 26.01.2012, 21:17 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Alex86,
Quote (Alex86)
Да что обьяснять, я всё понял как это работает, но вот как его заставить работать не знаю.

Ну объясните, хотя бы, что хотите заставить меняться ... Шапку что ли?
Quote (Alex86)
У меня и фон и шапка в ксс сделана. Код я выложил.

И что?
Контекстные стили имеют более высокий приоритет. Так что, ничего страшного.

Quote (Alex86)
Ну так как, можно что нибудь в моём случае сделать ?

Можно практически все, и не думаю что ваш случай исключение, главное хотите ли вы этого.
Если хотите - то пробуйте, а что будет не получаться спрашивайте. Тем более, если написанное выше понятно.
...


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


Доброе утро.
Я хочу чтоб фон сайта менялся. Я уже пробовал сделать, но у меня не получилось. Не пойму куда вставлять скрипт. Вставлял в и в css и в html ничего не получилось. На другом сайте с другим шаблоном всё работает, а тут нет. Если не затруднит подскажи пожалуйста в какое место этот скрипт добавить, коды в посте выше.
Спасибо.


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


Alex86,
Quote (Alex86)
Не пойму куда вставлять скрипт. Вставлял в и в css и в html ничего не получилось.

Скрипт вставляют в шаблон, если нужно чтобы фон менялся на всех страницах сайта, то в глобальный блок, например «Верхний».
...
Quote (Alex86)
в какое место этот скрипт добавить, коды в посте выше.

В глобальный блок «AHEADER» - в любое место, можно в конец блока.
...


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


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


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


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