почему фоновое изображение слайд-шоу задерживается? - PullRequest
0 голосов
/ 19 декабря 2018

Я пытаюсь сделать фоновое слайд-шоу с помощью слайдера контента, но у каждого с разным кодом и javascript при загрузке страницы слайдер фонового изображения задерживается, поэтому контент не выглядит корректно с фономHTML-код

    <section id="home">
        <div class="" id="whiteback"></div>
        <div class="row" style="position: absolute; margin: auto; z-index: 10; width: 100%; height: 100vh;">
            <div id="slideshow" class="slider__inner">
                <div class="slider__contents">
                    <i class="slider__image fa fa-lightbulb-o"></i>
                    <h1 class="slider__caption ml5"><span class="text-wrapper"><span class="letters letters-left">loream </span> <span class="letters letters-right">ipsum</span> </span></h1>
                    <p class="slider__txt"><a href="#portfolio" class="smoothScroll btn btn-danger">lorem</a> <a href="#contact" class="smoothScroll btn btn-default">ipsum</a></p>
                </div>
                <div class="slider__contents">
                    <i class="slider__image fa fa-newspaper-o"></i>
                    <h2 class="slider__caption">newspaper-o</h2>
                    <p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
                </div>
                <div class="slider__contents">
                    <i class="slider__image fa fa-diamond fa-2x"></i>
                    <h2 class="slider__caption">diamond</h2>
                    <p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
                </div>
            </div>
        </div>
    </section>

код JavaScript

<script>
    var images = new Array('images/download.jpg', 'images/christ.jpg', 'images/download1.jpg');
    var nextimage = 0;

    $("#slideshow > div:gt(0)").hide();
    setInterval(function () {
        if (nextimage >= images.length) { nextimage = 0; }
        $('#home')
            .css('background-image', 'url("' + images[nextimage++] + '")')
            .fadeIn(1000);

        $('#slideshow > div:first')
          .fadeOut(1000)
          .next()
          .fadeIn(1000)
          .end()
          .appendTo('#slideshow');
    }, 5200);
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...