jQuery实现手动轮播图——制作轮播切换效果

$(document).ready(function() {
    var $slider = $('#slider');
    var $sliderItems = $slider.find('.slider-item');
    var currentIndex = 0;
 
    function goToSlide(index) {
        currentIndex = index;
        $sliderItems.removeClass('active').eq(index).addClass('active');
    }
 
    // 初始化时显示第一张图片
    goToSlide(0);
 
    // 设置轮播间隔为3000毫秒
    setInterval(function() {
        var nextIndex = (currentIndex + 1) % $sliderItems.length;
        goToSlide(nextIndex);
    }, 3000);
 
    // 添加点击事件，点击左右按钮时切换图片
    $('#slider-prev').click(function() {
        var prevIndex = (currentIndex - 1 + $sliderItems.length) % $sliderItems.length;
        goToSlide(prevIndex);
    });
 
    $('#slider-next').click(function() {
        var nextIndex = (currentIndex + 1) % $sliderItems.length;
        goToSlide(nextIndex);
    });
});

这段代码实现了一个简单的手动轮播图效果，通过点击左右按钮或者自动播放来切换图片。注意，这里没有包含CSS样式，你需要根据自己的设计来添加相应的样式。