Question

我正在创建一个显示背景和文本的滑块，但我希望每张幻灯片都有不同的持续时间。我不知道怎么做这个

HTML：

<div id="slideshow">
    <div class="black_background">
        <div id="typewriter"></div>
    </div>
    <div class="black_background">
        <div>
            <p class="yellow">Wij</p>
        </div>
    </div>
    <div class="black_background">
        <div>
            <p class="yellow">Zijn</p>
        </div>
    </div>
</div>

JQUERY

<script>
        $("#slideshow > div:gt(0)").hide();

        setInterval(function() {
            $('#slideshow > div:first')
                .fadeOut(1)
                .next()
                .fadeIn(1)
                .end()
                .appendTo('#slideshow');
        }, 1500,);
    </script>

Answer 1

这是一个可能的解决方案：

＆＃13;

$("#slideshow > div:gt(0)").hide();

// Function for changing to the next slide
let nextSlide = (count, delay) => {
  // Set the delay on the slide
  setTimeout(() => {
    // Hide the current slide
    $('#slideshow > div:nth-of-type(' + count + ')').hide();
    // If we've reached the end of the slides, set count back to 1,
    // otherwise, increment by 1
    (count !== $('#slideshow > div').length) ? count++ : count = 1;
    // Show the next slide
    $('#slideshow > div:nth-of-type(' + count + ')').show();
    // Set the delay to the value of the data-delay attribute on the
    // slide elements
    delay = $('#slideshow > div:nth-of-type(' + count + ')').data('delay');
    // Call this function recursively
    nextSlide(count, delay);
  }, delay);
}

nextSlide(1, $('#slideshow > div:first').data('delay'));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
  <div data-delay="2000" class="black_background">
    <div id="typewriter">First</div>
  </div>
  <div data-delay="1000" class="black_background">
    <div>
      <p class="yellow">Wij</p>
    </div>
  </div>
  <div data-delay="3000" class="black_background">
    <div>
      <p class="yellow">Zijn</p>
    </div>
  </div>
</div>

＆＃13;

请注意幻灯片元素上的data-delay属性，这些属性需要一个以毫秒为单位的数字，表示您希望每张幻灯片的持续时间。

每张幻灯片的时间不同

1 个答案: