X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Помогите советом по JS
foxlite
foxlite
Topic Starter сообщение 3.4.2016, 20:15; Ответить: foxlite
Сообщение #1


Новичок
*

Группа: User
Сообщений: 27
Регистрация: 4.11.2015
Поблагодарили: 1 раз
Репутация:   0  


Здравствуйте. Нашел ротатор текста на JavaScript, он работает вполне нормально, меняет текст по времени, но мне необходимо сделать так, что бы каждый раз текст сменялся плавно, помогите пожалуйста, кто разбирается.
Вот код:
Код
var elements = 3;     //количество div-элементов с текстом
    var time = 3;         //задержка смены текста по времени в секундах
    var currentText = 0;
    var color = 255;
    noElement = elements + 1;
    time = time*1000;
    function blockRotator () {
        currentText++;
        if (currentText == noElement) {
            currentText = 1;
        }
        if (currentText == 1) {
            prevText = elements;
        }
        else {
            prevText = currentText - 1;
        }
        var hide = document.getElementById('block'+prevText);
        hide.style.display = 'none';
        var show = document.getElementById('block'+currentText);
        show.style.display = 'block';

        setTimeout('blockRotator()', time);
    }
    window.onload = blockRotator;


Код
<div id="container">
                  <div id="block1"><h1>Привет</h1></div>        
                  <div id="block2"><h1>Как дела?</h1></div>
                  <div id="block3"><h1>Третий пункт</h1></div>
               </div>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
x64
x64
сообщение 3.4.2016, 21:06; Ответить: x64
Сообщение #2


F.A.L.L.O.U.T.
*******

Группа: Super Moderator
Сообщений: 3124
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2503 раза
Репутация:   277  


Цитата(foxlite @ 3.4.2016, 19:15) *
необходимо сделать так, что бы каждый раз текст сменялся плавно

Что понимается под этой фразой? Как Вы представляете плавную смену текста abc на xyz?


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
foxlite
foxlite
Topic Starter сообщение 3.4.2016, 21:16; Ответить: foxlite
Сообщение #3


Новичок
*

Группа: User
Сообщений: 27
Регистрация: 4.11.2015
Поблагодарили: 1 раз
Репутация:   0  


x64, я имею в виду не резко текст выскакивал, а с некоторой анимацией, я знаю что это можно сделать с помощью JS, но не знаю как именно прописать.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
jjoret
jjoret
сообщение 4.4.2016, 1:50; Ответить: jjoret
Сообщение #4


Завсегдатай
*****

Группа: Active User
Сообщений: 791
Регистрация: 29.11.2011
Из: Беларусь
Поблагодарили: 169 раз
Репутация:   45  


пропишите transition: 0.3s в стилях


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
foxlite
foxlite
Topic Starter сообщение 4.4.2016, 2:27; Ответить: foxlite
Сообщение #5


Новичок
*

Группа: User
Сообщений: 27
Регистрация: 4.11.2015
Поблагодарили: 1 раз
Репутация:   0  


jjoret, прописывал, не помогло.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Switchback
Switchback
сообщение 8.4.2016, 0:44; Ответить: Switchback
Сообщение #6


Частый гость
**

Группа: User
Сообщений: 58
Регистрация: 1.12.2008
Из: Харьков
Поблагодарили: 10 раз
Репутация:   2  


Я бы использовал jQuery анимацию. Для работы подключаем jQuery к странице.
Код
<script src="https://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script>


Но код как для частного случая. Я использовал селектор #container > div, ибо других вложенных div в #container нет.
Возможно прописать селектор .block, например. А в каждый div с "block" добавить класс block.

JS
Код
$( document ).ready(function() {
    $('#container > div').hide();
});

var elements = 3;     //количество div-элементов с текстом
    var time = 3;         //задержка смены текста по времени в секундах
    var currentText = 0;
    var color = 255;
    noElement = elements + 1;
    time = time*1000;
    $
    function blockRotator () {
        currentText++;
        if (currentText == noElement) {
            currentText = 1;
        }
        if (currentText == 1) {
            prevText = elements;
        }
        else {
            prevText = currentText - 1;
        }

        $('#block'+prevText).hide();//
        $('#block'+currentText).fadeIn(500);


        setTimeout('blockRotator()', time);
    }
    window.onload = blockRotator;

Код
<div id="container">
                  <div id="block1"><h1>Привет</h1></div>        
                  <div id="block2"><h1>Как дела?</h1></div>
                  <div id="block3"><h1>Третий пункт</h1></div>
</div>


Сообщение отредактировал Switchback - 8.4.2016, 0:45


--------------------
Успеха достигает тот, кто не оставляет сил на обратный путь.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
MoriSar
MoriSar
сообщение 10.5.2016, 14:39; Ответить: MoriSar
Сообщение #7


Новичок
*

Группа: Viewer
Сообщений: 9
Регистрация: 28.3.2016
Поблагодарили: 3 раза
Репутация:   0  


Что бы я еще тут сделал, так это диву #container дал бы стиль display: none, что бы текст не мигал во время загрузки страницы... Но в таком случае, если у посетителя будет отключен JavaScript в браузере, о этого текста он не увидит вообще...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Вирус на Wordpress, помогите разобраться
1 duoseo 469 Сегодня, 1:05
автор: wturm
Открытая тема (нет новых ответов) Помогите, пожалуйста, убрать элемент на сайте
4 LeZ 859 Вчера, 2:11
автор: LeZ
Открытая тема (нет новых ответов) Помогите придумать название для адалт сайта
10 7Assassin7 780 14.1.2017, 1:08
автор: KардельАлиса
Горячая тема (нет новых ответов) Помогите советом
31 lolstag 3856 9.1.2017, 1:04
автор: Scott777
Открытая тема (нет новых ответов) Помогите оценить сайт на покупку
0 romanuch 472 8.1.2017, 20:07
автор: romanuch


 



RSS Текстовая версия Сейчас: 20.1.2017, 21:59
Дизайн