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

Question

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

在下面的代码中，它被设置为每5秒淡出一次． 是否有一种方法可以修改这一点，以便我可以设置自定义的时间长度来显示每张幻灯片?

下面是一个关于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()来滑动不同的图像。

试试下面的代码片段

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