Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Ротатор текста

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

xocotl

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Друзья прошу помощи!
Я не разбираюсь в написании скриптов.
 
У меня есть скрипт ротатора текста, который один из немногих заработал на сайте, который я сейчас делаю.
Но мне его надо чуть изменить.
А именно:
1 сделать плавную смену текста
2 убрать задержку перед первым появлением текста
3 сделать его не рендомным, а последовательным зацыленным
 
Код:
<script type="text/javascript">
 var texts = new Array();
 
texts[0]="Молоко! ...<br/>и ничего кроме!";
texts[1]="Позаботьтесь<br/>о своем здоровье!";
 
 
function show(){
    var el=document.getElementById("text");
    el.innerHTML=texts[Math.floor(Math.random()*texts.length)];
}
 
setInterval(show,2000);
        
</script>
 
Вывод:
<h2 id="text" class="titlslogan mpnone"></h2>  
 
Увидеть это можно xdemo.ru
Сразу под надписью "Ярославка"
Сейчас он появляется с задержкой
 

Всего записей: 32 | Зарегистр. 17-02-2017 | Отправлено: 11:30 23-10-2017
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
xocotl

Цитата:
2 убрать задержку перед первым появлением текста  


Код:
setInterval(show,2000);  
show();

 

Цитата:
сделать его не рендомным, а последовательным зацыленным  

добавляете переменную, которую увеличиваете при каждом показе. при превышении количества элементов в массиве - выставляете в 0;

Код:
 
var counter = 0;
function show() {  
    var el = document.getElementById("text");  
    el.innerHTML = texts[counter];
    counter = counter == text.length - 1 ? 0 : (counter + 1);
}
 
 

Цитата:
сделать плавную смену текста  

либо используете jquery, либо пользуетесь возможностью анимации в CSS3.
анимируете прозрачность до исчезновения, после окончания меняете текст и анимируете прозрачность обратно
 
https://jsfiddle.net/5qv0u871/ (первый текст будет показан чуть дольше из за реализации кода)
 
ну и научитесь правильно называть темы с указанием языка.  а еще лучше спрашивать в существующих темах - вопросы по javascript, к примеру

Всего записей: 15115 | Зарегистр. 20-09-2014 | Отправлено: 19:20 23-10-2017 | Исправлено: Mavrikii, 20:26 23-10-2017
xocotl

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii Спасибо большое

Всего записей: 32 | Зарегистр. 17-02-2017 | Отправлено: 23:59 23-10-2017
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » Ротатор текста


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru