Нестандартное слайд-шоу с текстом

Question

Я хочу сделать слайд-шоу с текстом на моем сайте. У нас есть один текст в теге H1, а другой в теге P. Дело в том, что когда вы открываете веб-страницу, слайд-шоу начинается немедленно. Текст в теге H1 появляется медленно (скажем, метод затухания или скольжения), затем появляется текст в теге P. Через некоторое время тексты исчезают одновременно. Продолжая перезапуск, появится текст H1, затем P и т. Д. Обратите внимание, что все тексты хранятся в массиве объектов. Может быть, у вас есть идеи? Спасибо.

var headerSlidesArray = [
{
    'h1' : 'Lorem Ipsum is simply dummy text of the printing and typesetting industry',
    'p' : "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book"
},
{
    'h1' : 'Second H1',
    'p' : 'Second P'
},
{
    'h1' : 'Third H1',
    'p' : 'Third P'
}];

HTML код:

<div id="slider">
            <div class="slide">
                <h1></h1>
                <p></p>
            </div>
            <div id="sliderBtns">
                <div class="sliderBtn active"></div>
                <div class="sliderBtn"></div>
                <div class="sliderBtn"></div>
            </div>
        </div>

Answer 1

var headerSlideIndex = 1;
var nextHeaderSlideIndex = headerSlideIndex + 1;
var headerSlideShowLoop;
var headerSlidesCount;

$('.slide:nth-child(' + headerSlideIndex + ')').show();
$('.slide:nth-child(' + headerSlideIndex + ') > h1').fadeIn(1500);
$('.slide:nth-child(' + headerSlideIndex + ') > p').delay(1500).fadeIn(1500);
startHeaderSlider();

function startHeaderSlider() {
    headerSlidesCount = $('#slider > .slide').length;

    headerSlideShowLoop = setInterval(function() {
        if (nextHeaderSlideIndex > headerSlidesCount) {
            headerSlideIndex = 1;
            nextHeaderSlideIndex = 1;
        }
        showHeaderSlide(nextHeaderSlideIndex);
    }, 8000);
}

function prevHeaderSlide() {
    var prevHeaderSlide = headerSlideIndex - 1;
    showHeaderSlide(prevHeaderSlide);
}

function nextHeaderSlide() {
    var nextHeaderSlide = headerSlideIndex + 1;
    showHeaderSlide(nextHeaderSlide);
}

function stopHeaderSlideShowLoop() {
    window.clearInterval(headerSlideShowLoop);
}

function showHeaderSlide(id) {
    stopHeaderSlideShowLoop();

    $('.sliderBtn').removeClass('active');

    if (id > headerSlidesCount) {
        id = 1;
    } else if (id < 1) {
        id = headerSlidesCount;
    }

    $('.slide').hide();
    $('.slide > h1').hide();
    $('.slide > p').hide();
    $('.slide:nth-child(' + id + ')').show();
    $('.slide:nth-child(' + id + ') > h1').fadeIn(1500);
    $('.slide:nth-child(' + id + ') > p').delay(1500).fadeIn(1500);

    $('.sliderBtn:nth-child(' + id + ')').addClass('active');

    headerSlideIndex = id;
    nextHeaderSlideIndex = id + 1;
    startHeaderSlider()
}

$('.sliderBtn').click(function(e) {
    e.preventDefault();
    showHeaderSlide($(e.target).index() + 1);
});

#slider {
  width: 100%;
  height: 200px;
  position: relative;
}

.slide {
  display: none;
}

.slide > h1 {
  display: none;
}

.slide > p {
  display: none;
}

#sliderBtns {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
}

.sliderBtn {
  margin: 0 5px;
  width: 1rem;
  height: 1rem;
  background-color: rgba(0, 0, 0, 0);
  border: 0.1rem solid rgb(0, 0, 0);
  border-radius: 50%;
  cursor: pointer;
}

.sliderBtn.active {
  background-color: rgb(245, 212, 118);
  border-color: rgb(245, 212, 118);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider">
                <div class="slide">
                    <h1>HEADER 1</h1>
                    <p>Paragraph 1</p>
                </div>
                <div class="slide">
                    <h1>HEADER 2</h1>
                    <p>Paragraph 2</p>
                </div>
                <div class="slide">
                    <h1>HEADER 3</h1>
                    <p>Paragraph 3</p>
                </div>
                <div id="sliderBtns">
                    <div class="sliderBtn active"></div>
                    <div class="sliderBtn"></div>
                    <div class="sliderBtn"></div>
                </div>
            </div>

Answer 2

Я бы запустил функцию, которая всегда вызывается таймером через определенное время. Переменная отслеживает, какое состояние в данный момент отображается пользователю. В зависимости от этого значения вы можете отобразить следующий текст.

setTimeout(myFunction, 1200);

var counter = 0;

var headline = document.getElementById('headline');
var subHeadline = document.getElementById('subHeadline');

function myFunction() {

  if ((counter%2) == 0)
  {
  	headline.innerHTML = "Headline 2";
  	subHeadline.innerHTML = "Subheadline 2";
  }
  else if ((counter%2) == 1)
  {
  	headline.innerHTML = "Headline 1";
  	subHeadline.innerHTML = "Subheadline 1";
  
  }
  counter++;
  
  setTimeout(myFunction, 1000);
  
}

<h1 id="headline">Headline 1</h1>
<p id="subHeadline">Subheadline 1</p>

Я использую два состояния в моей демонстрации. Первое состояние, которое закодировано в HTML. Остальные загружаются с Javascript. Я использую модуль по модулю для получения различных состояний и считаю каждый раз, когда вызывается функция.