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

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

• Важное объявление Важное объявление Важное объявление Важное объявление Важное объявление Важное объявление
• А здесь ещё одно ну очень важное объявление А здесь ещё одно ну очень важное объявление А здесь ещё одно ну очень важное объявление
• Не проходите мимо Не проходите мимо Не проходите мимо Не проходите мимо Не проходите мимо Не проходите мимо
• 
  

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

Код.

<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