我可以在这个视差函数中添加轮播吗？

Question

我已经下载了一个js。库。叫paroller.js 这有助于我制作视差效果。

它工作得很好，而且非常好，我什至在效果内放置了一个引导导航栏，因为该效果基于占据整个屏幕的背景图像 (forsidebillede2.jpg)。

现在我想循环那个背景图片，可能有 2-3 个轮播，但我不知道如何

我想这是每 X 秒背景的一些 CSS 变化？但我还没弄明白。

    <div class="jumbotron text-center bg-faded my-5" id="baggrundtop" style="background: url('media/forsidebillede2.jpg') no-repeat center; min-height:800px;" data-paroller-factor="0.5"> 

        <!--Navbar-->
        <nav class="navbar navbar-fixed-top navbar-expand-lg navbar-dark primary-color ">

            <a href="#" class="navbar-left"><img src="media/lillelogo.png"></a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
                    aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>


            <div class="collapse navbar-collapse" id="basicExampleNav">

                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Ydelser</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Referencer</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Kontakt</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</section>

Answer 1

有趣的想法...您可以有多个类，每个类都有不同的图像，然后使用setTimeout 按您选择的顺序更改类；我没有检查您提到的 paroller.js，但是您也可以仅使用纯 css 获得相同的视差效果。

工作 sn-p：

$(document).ready(function() {

  setTimeout(function() {
    $("#rotate").trigger('click');
  }, 2000);

  $("#rotate").click(function() {
    if ($('#parallaxDiv').hasClass("parallax1")) {
      $('#parallaxDiv').removeClass("parallax1");
      $('#parallaxDiv').addClass("parallax2");
    } else if ($('#parallaxDiv').hasClass("parallax2")) {
      $('#parallaxDiv').removeClass("parallax2");
      $('#parallaxDiv').addClass("parallax3");
    } else if ($('#parallaxDiv').hasClass("parallax3")) {
      $('#parallaxDiv').removeClass("parallax3");
      $('#parallaxDiv').addClass("parallax1");
    }

    setTimeout(function() {
      $("#rotate").trigger('click');
    }, 2000);

  });

});

.carousel-inner img {
  height: 100%;
}

#parallaxDiv {
  /* Set a specific height */
  min-height: 500px;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax1 {
  background-image: url("https://www.w3schools.com/howto/img_parallax.jpg");
}

.parallax2 {
  background-image: url("https://www.w3schools.com/bootstrap4/la.jpg");
}

.parallax3 {
  background-image: url("https://www.w3schools.com/bootstrap4/ny.jpg");
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>

<div id='parallaxDiv' class="parallax2"></div>

<div style="height:1000px;background-color:red;font-size:36px">
  <button type="button" id='rotate'>rotate</button> Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>