jQuery 可重复使用幻灯片 每张图设定不同时间
时间: 2023-05-29 22:03:01 浏览: 63
以下是一个示例,可以使用jQuery实现可重复使用的幻灯片,并为每张图设置不同的时间:
HTML结构:
```
<div class="slideshow">
<div class="slide" data-time="5000"><img src="slide1.jpg"></div>
<div class="slide" data-time="3000"><img src="slide2.jpg"></div>
<div class="slide" data-time="7000"><img src="slide3.jpg"></div>
</div>
```
CSS样式:
```
.slideshow {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide.active {
opacity: 1;
}
```
JavaScript代码:
```
$(document).ready(function() {
var slides = $('.slideshow .slide');
var currentSlide = 0;
function showSlide() {
slides.removeClass('active');
slides.eq(currentSlide).addClass('active');
var time = slides.eq(currentSlide).data('time');
setTimeout(nextSlide, time);
}
function nextSlide() {
currentSlide++;
if (currentSlide >= slides.length) {
currentSlide = 0;
}
showSlide();
}
showSlide();
});
```
在这个示例中,我们首先通过jQuery选择器获取所有幻灯片,然后设置一个变量来记录当前幻灯片的索引。然后,我们定义了两个函数:showSlide和nextSlide。
showSlide函数首先移除所有幻灯片的active类,然后将当前幻灯片添加active类,以使其显示在屏幕上。接下来,我们获取当前幻灯片的时间(以毫秒为单位)并使用setTimeout函数来等待指定的时间,然后调用nextSlide函数。
nextSlide函数简单地将当前幻灯片的索引递增,并检查是否已达到幻灯片的末尾。如果是,则将索引重置为0。最后,我们调用showSlide函数来显示下一张幻灯片。
整个过程是无限循环的,直到页面关闭或幻灯片被停止。