1
2
3
4
5

<div id="container"><!-- содержимое должно обязательно скрываться между тегами с id = "text + номер по порядку"-->
	<div id="text1">Tyler gets me a job as a waiter, after that Tyler’s pushing a gun in my mouth and saying, the first step to eternal life is you have to die.</div>
	<div id="text2">For a long time though, Tyler and I were best friends. People are always asking, did I know about Tyler Durden.</div>
	<div id="text3">The barrel of the gun pressed against the back of my throat, Tyler says “We really won’t die.”</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<style type="text/css">
	/* настройки по своему усмотрению */
	body {
		color: #000;
		background: #fff;
		font: normal x-small/1.4em tahoma, verdana, sans-serif;
	}
	#container {
		width: 200px;
		height: 200px;
		border: 1px solid #000;
	}
 
	/* правила ниже непосредственно относятся к скрипту */
	#text1, #text2, #text3 { /* если элементов с текстом больше чем 3, их следует добавить сюда через запятую */
		margin: 10px;
		display: none; /* изначально скрываем все блоки, потом они будут показываться с помощью js */
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<script type="text/javascript">
 
	// настройки для скрипта, можно редактировать на свое усмотрение
 
	var elements = 3; //количество div-элементов с текстом
	var time = 3; //задержка смены текста по времени в секундах
 
	//тело скрипта, желательно без причины не редактировать *) 
 
	var currentText = 0;
	var color = 255;
	noElement = elements + 1;
	time = time*1000;
 
	function textRotator () {
		currentText++;
		if (currentText == noElement) {
			currentText = 1;
		}
 
		if (currentText == 1) {
			prevText = elements;
		}
		else {
			prevText = currentText - 1;
		}
 
		var hide = document.getElementById('text'+prevText);
		hide.style.display = 'none';
 
		var show = document.getElementById('text'+currentText);
		show.style.display = 'block';
 
		setTimeout('textRotator()', time);
	}
 
	window.onload = textRotator;
 
</script>

Комментариев: 17

1. 

   Cергі, 20.03.2009 в 10:53

   У мене виникла проблема з даним скріптом і я не може її усунути. Програма працює, але при запуску у браузері спочатку показується два зображення (одне під одним, по порядку перше і друге), після 3 сек. усе нормально одне зображення, а друге зникає. А як зробити щоб зразу було 1 зображення???? Наперед дякую:))))

   Ответить

2. 

   rotor, 24.03.2009 в 20:23

   @Cергі

   Пропишите для нижнего div style="display: none" прямо в коде html-страницы, должно помочь.

   Ответить

3. 

   Сергей, 12.06.2009 в 13:20

   Подскажите как сделать ,что бы скрипт срабатывал не по времени,а при перезагрузке страницы?

   Ответить

4. 

   @ Anubis, 24.01.2010 в 23:00

   Согласен с предыдущим оратором, и как можно сделать так что бы в ротации был блок из 3-х текстов в ах?

   Ответить

   • 

     rotor, 25.01.2010 в 16:52 ↑

     Разве это не то, что в примере?

     Ответить

     • 

       @ Anubis, 25.01.2010 в 17:46 ↑

       ступил, а как сделать ,что бы скрипт срабатывал не по времени,а при перезагрузке страницы?

       Ответить

       • 

         rotor, 26.01.2010 в 13:09 ↑

         Придётся поискать другой скрипт или практически полностью переписать этот.

         Ответить

5. 

   @ Anubis, 24.01.2010 в 23:12

   в дивах простите

   Ответить

6. 

   @ Okilla, 11.05.2010 в 12:02

   Спасибо за скрипт!!!

   Работает замечательно. А можно ли как-то задать индивидуальное время отображения для каждого div'а ?

   Ответить

7. 

   djoni, 27.06.2010 в 14:39

   1. возможно сделать что бы одновременно отображалось скажем 2 div из 6 ?

   2. изначально в css прописано «display: none» я конечно не очень силен в работе с поисковиками но такие штуки могут быть ими расценены как попытка скрыть что то и результат моет оказаться бан в поисковой системе или я не прав?

   Ответить

   • 

     rotor, 27.06.2010 в 23:46 ↑

     1. В том виде, что есть сейчас, нельзя. Придётся переписывать скрипт.

     2. Теоретически возможно. Споры из-за этого периодически возникают на форумах сеошников. Но в сети можно найти сотни тысяч примеров использования display: none (а также других способов скрытия контента: visibility, text-indent) в выпадающих меню, баннерах, инфоблоках, AJAX'е и т.д.

     С реальным примером бана сайта для людей из-за пары строчек display: none я не сталкивался.

     Ответить

     • 

       djoni, 28.06.2010 в 6:30 ↑

       спасибо большое за ответ, чувствую придется мне учит JS ((

       Ответить

8. 

   djoni, 18.07.2010 в 12:03

   Не могли бы подсказать, в скриптах я новичок, но если все правильно понял, то чтобы 2 div был видимым, нужно прописать очередной var типа

   var show = document.getElementById ('text'+nextText);

   show.style.display = 'block';

   но не пойму как правильно указать вычисление этого id

   Ответить

   • 

     djoni, 18.07.2010 в 19:18 ↑

     кстати если в css у блоков прописать вместо none block, то скрипт работает нормально после 1 цикла, до этого скрипт отображает по несколько div id="text1", но если у вас div ы одинокавые то div conteiner можно поставить overflow hidden

     Ответить

9. 

   @ Юрий, 24.11.2010 в 22:45

   А как сделать ротацию двух блоков на одной странице?

   Т.е. ... в одной ячейке,

   и ... в другой ячейке

   Ответить

   • 

     @ Юрий, 26.11.2010 в 22:39 ↑

     разобрался, спасибо

     Ответить

10. 

    Михаил, 01.05.2011 в 15:24

    Спасибо!

    Встроил ротацию баннеров в sitebar joomla простым копированием кода с сайта.

    Автору огромный респект!

    Ответить