Последовательный автоматический вывод текста.

[Шурик]

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

Знаю, что такие скрипты были, но найти в сети мне их не удалось, хотя убил кучу времени. Уверен, что у кого-то здесь они есть, либо знают где взять.

вообще, в идеале, нужно так - бегущая строка, выбежала целиком, постояла, потом пропала и начала выбегать новая. Но это в идеале, а так буду рад любой помощи. Спасибо.

[D.S.Denton]

— flood begin —

постояла, потом пропала

одобряю

начала выбегать новая

а вот это не очень...

— flood end —

[Шурик]

Перейду от общих вопросов конкретно к коду.

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

Скрипт ротации текста очень простой:

<script type="text/JavaScript">
var howMany=5
var lines=new Array(howMany)
 lines[0]="Хочется надеяться"
 lines[1]="ÏЧто очень скоро найдется решение"
 lines[2]="Вывода сменных текстовых строк"
 lines[3]="<b>В виде бегущей строки</b>"
 lines[4]="<i>С возможностью оформления каждой строки</i>"

var currentAda = 0
var delay = 3000

function cyclea() {
 if (currentAda == howMany) {currentAda = 0}

 textCont = document.getElementById('rotator')
 textCont.innerHTML = lines[currentAda]

 currentAda++
}
 window.setInterval("cyclea()",delay)

</SCRIPT>

В html выводим просто

Недостаток этого скрипта - время задержки, которое установлено между выводами текстов, применяется и к самому первому тексту, т.е. при загрузке страницы первый текст появляется с той же задержкой, что не очень правильно. Как этого избежать, не знаю.

Но самое грустное начинается дальше. Когда хочется сделать строку бегущей.

Добавление к тексту контейнера с требуемыми параметрами решает проблему, но только не для Mozilla. Там это работать отказывается.

Возникла идея сделать бегущую строку тоже на javascript. Это даст еще один плюс - не придется подбирать время задержки между выводами, чтобы успел прогнать строку - все будет само идти друг за другом, функция скроллинга отработала, текст постоял сколько надо, потом идет смена.

Идея по скроллингу такая - делаем див с относительным позиционированием и overfolw:hidden, в него кладем див с абсолютным позиционированием, позицию которого по горизонтали меняем функцией. Начинаем с позиции left, равной ширине родительского дива (текст полностью скрыт за границей дива), потом уменьшаем, он начинает вылезать. Закончить надо, когда вылезет полностью конец строки (при этом ее начало может уже скрыться, т.к. она может быть длиннее окна). То есть надо вычислять длину текста для каждой строки.

Но я не могу нормально написать такой скрипт. Готовые, которые есть, как правило не работают в Mozilla, используют для вывода строки

(что не хотелось бы), и зачастую очень большие...

Может кто поможет?

[Шурик]

Удалось решить задачу. Практически. То есть две функции, одна меняет текст в контейнере, по очереди выбирая текстовые строки из массива, она же вызывает вторую, которая двигает этот контейнер, создавая бегущую строку. Вот работа этого скрипта www.tright.ru/triumf/text_rotator.html

Есть, правда, одна неувязочка. Функция, которая меняет строки, работает в цикле с setInterval, а по идее, должна переходить к следующему циклу не по интервалу, а после того, как вызванная ею вторая функция закончит двигать строку. И строка немного постоит на месте. Сейчас это достигается просто увеличением интервала, и применением примерно одинаковых по длине строк. Но это неправильно.

[AKS]

Шурик, вот функция, которая работает почти так, как Вам хотелось бы. Может быть она Вам пригодится, как подсказка для поиска собственного решения:

function init() {
 var re = /function|object/;
 if (typeof window != 'object' || 
 !re.test(typeof window.setTimeout) ||
 typeof document != 'object' || 
 !re.test(typeof document.getElementById)) {
 return false;
 };
 var container = document.getElementById('banner');
 var text = document.getElementById('my_field');
 if (typeof container != 'object' || typeof text != 'object' ||
 typeof text.style != 'object') {
 return false;
 };
 var width = container.offsetWidth;
 if (typeof width != 'number' || width <= 0) {
 return false;
 };
 var lines = ['Наконец-то удалось найти',
 'Правильное решение данной проблемы',
 'Ротатор гипертекстов на странице',
 '<b>Cо скроллингом каждой строчки</b>',
 '<i>Можно вкладывать любые html конструкции!</i>',
 'Работает в любых броузерах',
 'Это мой первый javascript',
 'Не все еще в нем хорошо...',
 '<b>***Но он работает!!!***</b>'];
 var id = 0;
 var length = lines.length;
 var delay = 1000;
 var pos = width;
 var style = text.style;
 function cycle() {
 if (delay == 1000) {
 text.innerHTML = lines[id];
 id = (id + 1) % length;
 delay = 10;
 };
 style.left = pos + 'px';
 if (--pos <= 0) { 
 pos = width;
 delay = 1000;
 };
 window.setTimeout(cycle, delay);
 };
 cycle();
};

[Шурик]

Скрипт полностью доделан. Я пришел к выводу, что необходимо помещать текстовые строки вне тела скрипта, на html странице в своих контейнерах, чтобы они выглядели как часть контента, нормально индексировались поисковиками и чтобы при генерации такой страницы cредствами php не затрагивать javascript. Исходя из этого скрипт был переделан и успешно работает. Кому интересно, посмотрите www.tright.ru/triumf/text_rotator.html

[Dimitry Wolotko]

FF2 - не работает.

[Шурик]

уже работает.