Вы можете принять участие в развитии форума. Подробнее:.

Автор Тема: Меняющийся текст на javascript/jQuery  (Прочитано 77 раз)

0 Пользователей и 1 Гость просматривают эту тему.

nikogdaАвтор темы

  • *
  • Оффлайн
  • Награды Более 10 созданных тем Более 2 лет на форуме
  • Дата регистрации: Июль 2016
  • Сообщений: 38
  • Страна: ru
  • Репутация +0/-0
  • Пол: Мужской
    • Награды
Меняющийся текст на javascript/jQuery
« : 06 Декабря 2018, 11:57:31 »
Нужна помощь.
Нашел в интернете данную функцию, но не понимаю какой код вписать в html скрипта ФФ.
Что я сделал:
1) Создал файл js и вписал туда данный код
2) В папку /inc/_header.php прописал данный js скрипт
3) В html страницу где я хочу увидеть работу скрипта прописал вот это:
<div class="textrotator_example" ></div>
Но ничего не работает.

Люди подскажите как правильно сделать, чтобы данный скрипт работал и с текстом и с картинками. Что надо прописать в html и может еще куда в скрипте ФФ.

Вот сам код:
Код функции для текста:

.textrotator - класс, с которым мы работаем.

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

phrases - массив фраз, которые будут крутиться в ротации.

function Rotator(start_from){
    var phrases = ["Какой-то текст 1","Какой-то текст 2","Какой-то текст 3"];
    var total = phrases.length;
    var interval = 5000;
    if(void 0 === start_from){
        start_from = 0;
    }
 
    $(".textrotator").text(phrases[start_from]).animate({"opacity":"1"}, 1000, function(){
                if(start_from >= (total-1)){
                    setTimeout(function(){
                        $(".textrotator").animate({"opacity":"0"}, 1000, function(){
                            Rotator();
                        });
                    }, interval);
                }else{
                    start_from++;
                    setTimeout(function(){
                        $(".textrotator").animate({"opacity":"0"}, 1000,function(){
                            Rotator(start_from);
                        });
                    }, interval);
         
                }           
         
    })
}


Код функции для картинки:
function Rotator(start_from){
    var images = ["/images/1.jpg","/images/2.jpg","/images/3.jpg"];
    var total = images.length;
    var interval = 5000;
    if(void 0 === start_from){
        start_from = 0;
    }
 
    $(".imagerotator").attr("src", images[start_from]).animate({"opacity":"1"}, 1000, function(){
                if(start_from >= (total-1)){
                    setTimeout(function(){
                        $(".imagerotator").animate({"opacity":"0"}, 1000, function(){
                            Rotator();
                        });
                    }, interval);
                }else{
                    start_from++;
                    setTimeout(function(){
                        $(".imagerotator").animate({"opacity":"0"}, 1000,function(){
                            Rotator(start_from);
                        });
                    }, interval);
         
                }           
         
    })
}

Еще написано, что Запускается скрипт очень просто и вот еще один код:
<script type="text/javascript">
$(document).ready(function(){
    Rotator();
})
</script>

 

GameRussia

  • *
  • *
  • Оффлайн
  • Награды Репутация более 5 На форуме более 1 года За помощь пользователям Более 100 сообщений Более 10 созданных тем
  • Дата регистрации: Июнь 2017
  • Сообщений: 147
  • Страна: ru
  • Поблагодарили: 13 раз(а)
  • Репутация +7/-0
  • Пол: Мужской
    • Награды
Меняющийся текст на javascript/jQuery
« Ответ #1 : 06 Декабря 2018, 16:33:41 »
Ну первое что бросается в глаза - это то что ты div элементу прописал класс textrotator_example хотя САМ написал, что плагин работает с классом textrotator
<div class="textrotator" ></div>
Так правильно.
И на будущее, смотри, что выдает консоль в браузере.
 

goodwin

  • *
  • Оффлайн
  • Награды На форуме более 1 года Более 100 сообщений Репутация более 5 Активный участник голосований за форум
  • Дата регистрации: Дек. 2017
  • Сообщений: 125
  • Страна: ru
  • Поблагодарили: 6 раз(а)
  • Репутация +8/-0
  • Пол: Мужской
    • Награды
Меняющийся текст на javascript/jQuery
« Ответ #2 : 06 Декабря 2018, 16:37:46 »
ставь где надо блок
<div class="textrotator" ></div>
или
<div class="imagerotator" ></div>
и скорее всего внизу надо будет добавить
<script type="text/javascript">
$(document).ready(function(){
    Rotator();
})
</script>
 

nikogdaАвтор темы

  • *
  • Оффлайн
  • Награды Более 10 созданных тем Более 2 лет на форуме
  • Дата регистрации: Июль 2016
  • Сообщений: 38
  • Страна: ru
  • Репутация +0/-0
  • Пол: Мужской
    • Награды
Меняющийся текст на javascript/jQuery
« Ответ #3 : 06 Декабря 2018, 22:31:49 »
Спасибо всем - все работает.
 

GameRussia

  • *
  • *
  • Оффлайн
  • Награды Репутация более 5 На форуме более 1 года За помощь пользователям Более 100 сообщений Более 10 созданных тем
  • Дата регистрации: Июнь 2017
  • Сообщений: 147
  • Страна: ru
  • Поблагодарили: 13 раз(а)
  • Репутация +7/-0
  • Пол: Мужской
    • Награды
Меняющийся текст на javascript/jQuery
« Ответ #4 : 07 Декабря 2018, 20:35:52 »
Чтобы работал imgrotator нужно указывать не div элемент, а img со ссылкой на картинку, например
<img class="imagerotator" src="img/1.jpg">
 

nikogdaАвтор темы

  • *
  • Оффлайн
  • Награды Более 10 созданных тем Более 2 лет на форуме
  • Дата регистрации: Июль 2016
  • Сообщений: 38
  • Страна: ru
  • Репутация +0/-0
  • Пол: Мужской
    • Награды
Меняющийся текст на javascript/jQuery
« Ответ #5 : 07 Декабря 2018, 21:04:33 »
Чтобы работал imgrotator нужно указывать не div элемент, а img со ссылкой на картинку, например
О крутяк - все работает. Спасибо еще раз.
 

goodwin

  • *
  • Оффлайн
  • Награды На форуме более 1 года Более 100 сообщений Репутация более 5 Активный участник голосований за форум
  • Дата регистрации: Дек. 2017
  • Сообщений: 125
  • Страна: ru
  • Поблагодарили: 6 раз(а)
  • Репутация +8/-0
  • Пол: Мужской
    • Награды
Меняющийся текст на javascript/jQuery
« Ответ #6 : 07 Декабря 2018, 23:16:58 »
Чтобы работал imgrotator нужно указывать не div элемент, а img со ссылкой на картинку, например
<img class="imagerotator" src="img/1.jpg">
див указывать надо, а ссылки на картинки в js.
 

nikogdaАвтор темы

  • *
  • Оффлайн
  • Награды Более 10 созданных тем Более 2 лет на форуме
  • Дата регистрации: Июль 2016
  • Сообщений: 38
  • Страна: ru
  • Репутация +0/-0
  • Пол: Мужской
    • Награды
Меняющийся текст на javascript/jQuery
« Ответ #7 : 08 Декабря 2018, 00:00:53 »
див указывать надо, а ссылки на картинки в js.
Я разобрался потихоньку) Спасибо.
 

GameRussia

  • *
  • *
  • Оффлайн
  • Награды Репутация более 5 На форуме более 1 года За помощь пользователям Более 100 сообщений Более 10 созданных тем
  • Дата регистрации: Июнь 2017
  • Сообщений: 147
  • Страна: ru
  • Поблагодарили: 13 раз(а)
  • Репутация +7/-0
  • Пол: Мужской
    • Награды
Меняющийся текст на javascript/jQuery
« Ответ #8 : 08 Декабря 2018, 08:03:50 »
див указывать надо, а ссылки на картинки в js.
Ну попробуй с дивом.. только тогда придётся обходными путями картинки выводить. Див сам по себе картинку не выведет.
 
Теги:
 

[KST] Hide 2.0.5 - плагин "скрытый текст"

Автор shans5Раздел Модули (плагины) XenForo

Ответов: 0
Просмотров: 29
Последний ответ 27 Ноября 2018, 10:45:17
от shans5
Как скрыть определённый текст или пункт меню?

Автор Sergei777Раздел Вопросы / ответы по разным скриптам

Ответов: 2
Просмотров: 426
Последний ответ 10 Марта 2017, 03:31:27
от kvozimir
Проблема с дизайном, цвет, текст...

Автор DaefРаздел Вопросы по настройке фф

Ответов: 3
Просмотров: 175
Последний ответ 06 Мая 2018, 19:26:23
от finans13
Модуль ЧАТ на javascript для ФФ Нужна помощь!

Автор OlegSРаздел Вопросы по модулям фф

Ответов: 6
Просмотров: 1237
Последний ответ 14 Сентября 2016, 19:02:44
от OlegS
НУЖНА ПОМОЩЬ ЧАТ на javascript

Автор BOSS18Раздел Общие вопросы по фермам

Ответов: 5
Просмотров: 1388
Последний ответ 29 Марта 2016, 10:33:57
от BOSS18
Имя пользователя:
Пароль:
Session: