jquery手风琴图片轮播切换

jQuery手风琴图片轮播切换是一种常用的网页图片轮播效果，可以让网页内容更加生动，增强用户体验。手风琴效果是指在图片轮播时，当前图片会被放大，其他图片则会被压缩。以下是该效果的实现步骤：

1. HTML结构：创建一个包含所有图片的容器和一个包含所有小圆点的容器。

2. CSS样式：为容器和小圆点添加样式，设置图片的宽度、高度和位置。

3. JavaScript代码：实现图片轮播的逻辑。通过jQuery获取容器和小圆点，为小圆点添加点击事件，点击后切换到对应的图片，并给当前图片添加类名，其他图片则移除类名，实现手风琴效果。

以下是一个示例代码：

HTML:

<div class="slider">
    <div class="slider-wrapper">
        <img src="img1.jpg" alt="">
        <img src="img2.jpg" alt="">
        <img src="img3.jpg" alt="">
    </div>
    <div class="dots">
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

CSS:

.slider {
    width: 100%;
    height: 500px;
    position: relative;
}
.slider-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}
.slider-wrapper img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.5s ease-in-out;
}
.slider-wrapper img.active {
    transform: scale(1.2);
}
.dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}
.dots span {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
}
.dots span.active {
    background-color: #f00;
}

JavaScript:

$(function(){
    var $slider = $('.slider'),
        $wrapper = $('.slider-wrapper'),
        $imgs = $('.slider-wrapper img'),
        $dots = $('.dots span'),
        len = $imgs.length,
        index = 0;

    // 初始化
    $imgs.eq(0).addClass('active');
    $dots.eq(0).addClass('active');

    // 点击事件
    $dots.on('click', function(){
        var idx = $(this).index();
        if(idx !== index){
            $imgs.eq(index).removeClass('active');
            $dots.eq(index).removeClass('active');
            $imgs.eq(idx).addClass('active');
            $dots.eq(idx).addClass('active');
            index = idx;
        }
    });
});