jquery 幻灯片 每张图停留时间不同 完整代码

以下是一个使用jQuery实现幻灯片，每张图停留时间不同的完整代码：

HTML：

<div class="slideshow">
<div class="slide" data-time="3000">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="slide" data-time="5000">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="slide" data-time="2000">
<img src="image3.jpg" alt="Image 3">
</div>
</div>

CSS：

.slideshow {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}

.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}

.slide.active {
display: block;
}

.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}

JS：

$(function() {
var slides = $('.slide');
var currentSlide = 0;

function showSlide(index) {
slides.removeClass('active');
slides.eq(index).addClass('active');
var time = parseInt(slides.eq(index).attr('data-time'));
setTimeout(function() {
nextSlide();
}, time);
}

function nextSlide() {
currentSlide++;
if (currentSlide >= slides.length) {
currentSlide = 0;
}
showSlide(currentSlide);
}

showSlide(currentSlide);
});

解释：

HTML中，我们定义了一个class为“slideshow”的容器，其中包含三个class为“slide”的幻灯片，每个幻灯片都有一个data-time属性，表示该幻灯片停留的时间。CSS中，我们为幻灯片容器设置了宽度和高度，并隐藏了溢出部分，为每个幻灯片设置了绝对定位并隐藏。JS中，我们首先获取所有幻灯片，然后定义了两个函数：showSlide和nextSlide。showSlide函数将所有幻灯片的active类移除，并为当前幻灯片添加active类，然后获取该幻灯片的停留时间，并使用setTimeout函数在该时间后调用下一个幻灯片。nextSlide函数将当前幻灯片的索引加1，如果大于等于幻灯片数量，则将索引重置为0，并调用showSlide函数。最后，我们调用showSlide函数以启动幻灯片。