jQuery轮播图代码非常简单，
- 首先在HTML中创建一个轮播图容器，
- 然后在CSS中设置容器和图片的样式。
- 接着在JavaScript中使用jQuery选择器选中所有的图片，
- 并设置一个定时器，每隔3秒切换一张图片。
代码如下
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图示例</title>
<style>
/* 设置轮播图容器的宽度和高度 */
.slider {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
/* 设置图片的宽度和高度 */
.slider img {
width: 100%;
height: 100%;
display: none; /* 默认隐藏所有图片 */
}
/* 设置当前显示的图片 */
.slider img.active {
display: block;
}
</style>
</head>
<body>
<div>
<!-- 添加图片 -->
<img src="image1.jpg" alt="图片1">
<img src="image2.jpg" alt="图片2">
<img src="image3.jpg" alt="图片3">
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 获取所有图片
var $images = $('.slider img');
// 设置定时器，每隔3秒切换一张图片
var timer = setInterval(function() {
$images.removeClass('active'); // 移除当前显示的图片的active类
$images.eq(0).addClass('active'); // 将第一张图片设置为当前显示的图片
$images.not(':first').each(function(index) { // 遍历除第一张图片之外的其他图片
$(this).prev().addClass('active'); // 将前一张图片设置为当前显示的图片
});
}, 3000);
});
</script>
</body>
</html>这里要注意的是，图片存放的路径，需要与程序所在路径相同。
不然得话，会出现找不到图片的问题。
