Скрипт для ротации текста

Скрипт для ротации текста

Простой по реализации, но интересный по постановке задачи. На мой взгляд, интересен тем, что текст находится не в js-массиве, а скрывается в слоях на странице с помощью JavaScript и CSS, тоесть полностью виден поисковыми ботами и доступен для индексации.

Писал не для себя, а в помощь отстающим студентам, поэтому претензии к реализации не принимаются :)

Несколько слов о реализации

Вообще, насколько мог, максимально расписал все в комментах листингов, если кто не разберется — пишите в комментариях к этому посту, объясню.

XHTML:

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>

По сути, содержание межде тегами <div>...</div>, может быть любым, а не только текстовым.

CSS:

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>

JavaScript:

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>

Работает в IE6+, Opera 9, Mozilla 2+, в остальных не тестил. Страница с рабочим примером тут.

Противопоказания

Работать не будет, если у пользователя в браузере отключена поддержка JavaScript. В этом случае используйте <noscript>...</noscript>, чтобы предупредить его о необходимости включения поддержки скриптов.

Применение

Использовать можно для прокрутки текста, линков, объявлений, баннеров в сайдбарах, смены цвета фона в блоках и по своему усмотрению.

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 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

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

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

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

    Ответить

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

    Спасибо!

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

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

    Ответить

Есть что сказать?