创建具有不同时间长度的幻灯片

Question

我有一个用 jQuery 编写的相当简单的幻灯片，它在 <div> 元素之间渐变。

在下面的代码中，它设置为在幻灯片之间每 5 秒淡出。有没有办法可以修改它，以便我可以设置自定义时间长度来显示每张幻灯片？

Here's jsfiddle 上的一个工作示例。

我的代码

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

    setInterval(function() { 
      $('#slideshow > div:first')
      .fadeOut(1000)
      .next()
      .fadeIn(1000)

      setTimeout(function() {$('#slideshow > div:first').appendTo("#slideshow")}, 1000)

    }, 5000);

Answer 1

您可以使用数组delay[] 来保存所有时间，并使用setTimeout() 方法创建函数slide() 来滑动不同的图像。

试试下面的sn-p

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

let delay = [1000, 3000, 7000], i = 0;               

function slide() {         
  setTimeout(() => {   
    effect();
    if(i === delay.length){
      i = 0; 
      console.log('Next delay: ' + delay[i] + ' ms');
    }
    else{
      console.log('Next delay: ' + delay[i] + ' ms');
    }
    slide();
  }, delay[i])
  i++;
}

slide();

function effect(){   
    $('#slideshow > div:first')
      .fadeOut(1000)
      .next()
      .fadeIn(1000);

      setTimeout(() => {$('#slideshow > div:first').appendTo("#slideshow")}, 1000)
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#slideshow {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#slideshow > div {
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideshow">

  <div>
    <img src="https://www.port.ac.uk/-/media/images/news-events-and-blogs/news/2020/october/cat-eyes-closed-600x400.jpg">
  </div>

  <div>
    <img src="https://cdn.shopify.com/s/files/1/0997/4496/files/Untitled_design_19_grande.jpg">
  </div>

  <div>
    <img src="https://media.nature.com/lw800/magazine-assets/d41586-020-02779-3/d41586-020-02779-3_18481780.jpg">
  </div>

</div>