jQuery 轮播图实现教程：简单易懂的代码示例

以下是一个使用 jQuery 实现轮播图的基本例子：

HTML 代码：

<div class='slider'>
    <ul class='slides'>
        <li><img src='image1.jpg'></li>
        <li><img src='image2.jpg'></li>
        <li><img src='image3.jpg'></li>
    </ul>
</div>

CSS 代码：

.slider {
    position: relative;
}
.slides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}
.slides li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}
.slides li:first-child {
    opacity: 1;
    z-index: 2;
}

jQuery 代码：

$(document).ready(function() {
    setInterval(function() {
        var currentSlide = $('.slides li:first-child');
        var nextSlide = currentSlide.next();

        currentSlide.fadeOut(1000);
        nextSlide.fadeIn(1000);

        currentSlide.removeClass('active');
        nextSlide.addClass('active');
    }, 5000);
});

在这个例子中，我们使用 jQuery 的 setInterval 函数来定时切换轮播图。具体来说，我们在每隔 5 秒钟就获取当前轮播图的第一张图片，并将其淡出，然后获取下一张图片并将其淡入，从而实现轮播效果。同时，我们还对当前轮播图的第一张图片和下一张图片进行了样式的切换，以便让用户知道当前轮播图的位置。