Простой ротатор текста

простой ротатор текста.
Привет, друзья. Самый простой ротатор текста можно использовать, чтобы обратить внимание читателей на какие - то важные объявления или приветствия в блоге. Про то, как заострить внимание на нужное объявление, мимо которого уж точно не пройти,
была эта шпаргалка. А как выглядит меняющийся текст, посмотрите ниже. 
  • Важное объявление Важное объявление Важное объявление Важное объявление Важное объявление Важное объявление
  • А здесь ещё одно ну очень важное объявление А здесь ещё одно ну очень важное объявление А здесь ещё одно ну очень важное объявление
  • Не проходите мимо Не проходите мимо Не проходите мимо Не проходите мимо Не проходите мимо Не проходите мимо

Сразу попрошу вас перейти сюда и посмотреть то же самое, только в другом варианте.

Код.


<ul id="slides">
<li class="slide showing">Первая часть текста</li>
<li class="slide"> Вторая часть текста</li>
<li class="slide">Третья часть</li>
</ul>
<script type="text/javascript">
var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,3000);

function nextSlide(){
    slides[currentSlide].className = 'slide';
    currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className = 'slide showing';
}
</script>
<style>
#slides{
    position: relative;
    height: 70px;
    padding: 0px;
    margin: 20px;
    list-style-type: none;
}
.slide{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;

    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}
.showing{
    opacity: 1;
    z-index: 2;
}
.slide{
text-align:left;
    font-size: 18px;
    padding: 10px;
    box-sizing: border-box;
    color: #333;
}
</style>


Добавляйте сколько угодно строк <li class="slide">текст текст</li> в код.

nextSlide,3000); скорость ротации.

Для оформления разного фона блока с текстом перед закрывающимся тегом </style>
добавляем ещё стили. Количество так же зависит от того, сколько блоков будет отображено.

.slide:nth-of-type(1){
    background: red;
}
.slide:nth-of-type(2){
    background: orange;
}
.slide:nth-of-type(3){
    background: green;
}
.slide:nth-of-type(4){
    background: blue;
}
.slide:nth-of-type(5){
    background: purple;
}

Вот и всё. Совсем несложный ротатор текста, с выводом нужной информации. Подумала, что таким образом можно вывести и анонсы каких -то статей. А может у кого и на другое фантазии хватит.

Спасибо вам за внимание. До скорых встреч.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


8 комментариев:

  1. Хорошая штука, полезная.
    С Рождеством тебя, Вика! Счастья, здоровья!

    ОтветитьУдалить
    Ответы
    1. Наташа, тебя с праздником. Удачи и всех благ.

      Удалить
  2. Анонимный12/29/2017

    Вика, здравствуйте,
    Уточните пожалуйста, надо ли подключать к библиотеке скриптов jQuery представленный Вами скрипт, ведь без этого он работать не будет? Как это сделать в представленном Вами варианте? Благодарю Вас.

    ОтветитьУдалить
    Ответы
    1. Этот ротатор текста работает на javascript. Библиотека jQuery не нужна. Пример прямо в статье.

      Удалить
  3. Анонимный12/30/2017

    Вика, добрый вечер,
    Благодарю Вас за ответ. Да, всё сработало, но только почему-то после того, как я исправил ул ай ди на див ай ди слайдс, и с див работает даже без закрывающего ул. Такое разве возможно? В чём тут хитрость? Предусматривает ли этот скрипт неограниченное множество заголовков в ротации? Если нет, то что нужно исправить/добавить, чтобы реализовать это? Я также использую платформу Blogger.

    P. S. Простите, что пишу "див" и "ул", окно Ваших комментариев не принимает HTML разметку.

    Спасибо!

    ОтветитьУдалить
  4. Во всех комментариях Блоггер не принимает коды кроме ЦСС. В статье написано что количество любое, только не забывайте добавлять .slide:nth-of-type(5){
    background: purple; и так далее.

    ОтветитьУдалить
    Ответы
    1. Анонимный12/31/2017

      Вика,
      Благодарю Вас за участие!
      С наступающими праздниками!
      Всяческих Вам благ и всего наилучшего!

      Удалить
  5. И Вам, спасибо. Удачи в новом году. Надеюсь увидеть Вас под ником, а не анонимно.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск