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也可以具有相同的视差效果。

工作片段：

$(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>

我可以在此视差功能中添加轮播吗？

1 个答案: