轮播图图片到了最后一张直接到第一张
可以通过以下代码实现轮播图图片到了最后一张直接到第一张的效果:
// 获取轮播图图片数量
var len = $('.slider img').length;
// 当前显示的图片索引
var index = 0;
// 自动轮播
function autoPlay() {
// 判断是否到达最后一张图片
if (index == len - 1) {
// 到达最后一张图片,将索引重置为0,显示第一张图片
index = 0;
$('.slider img').eq(index).fadeIn().siblings().fadeOut();
} else {
// 没有到达最后一张图片,将索引加1,显示下一张图片
index++;
$('.slider img').eq(index).fadeIn().siblings().fadeOut();
}
}
// 设置定时器,每隔3秒自动切换图片
var timer = setInterval(autoPlay, 3000);
在以上代码中,我们首先获取轮播图图片数量以及当前正在显示的图片索引。然后通过 autoPlay 函数实现自动轮播的效果,如果当前显示的图片是最后一张图片,那么就将索引重置为0,显示第一张图片。否则将索引加1,显示下一张图片。最后通过定时器来调用 autoPlay 函数,实现自动切换图片的效果。
原文地址: https://www.cveoy.top/t/topic/uIU 著作权归作者所有。请勿转载和采集!