jQuery横向手风琴图片展示插件

你好，以下是一个简单的jQuery横向手风琴图片展示插件的示例代码：

HTML代码：

<div class="accordion">
  <div class="accordion-item">
    <img src="image1.jpg">
    <div class="accordion-item-title">Image 1</div>
  </div>
  <div class="accordion-item">
    <img src="image2.jpg">
    <div class="accordion-item-title">Image 2</div>
  </div>
  <div class="accordion-item">
    <img src="image3.jpg">
    <div class="accordion-item-title">Image 3</div>
  </div>
</div>

CSS代码：

.accordion {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.accordion-item {
  width: 100vw;
  min-width: 300px;
  height: 100%;
  scroll-snap-align: start;
  position: relative;
}

.accordion-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.accordion-item-title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 1.5rem;
  padding: 0.5rem;
}

jQuery代码：

$(document).ready(function() {
  $('.accordion').on('scroll', function() {
    // 当前选中的手风琴项
    var $activeItem = null;
    // 手风琴项的宽度
    var itemWidth = $('.accordion-item').outerWidth();

    // 计算当前选中的手风琴项
    $('.accordion-item').each(function() {
      var itemLeft = $(this).offset().left - $('.accordion').offset().left;
      if (itemLeft <= $(window).width() / 2 && itemLeft + itemWidth > $(window).width() / 2) {
        $activeItem = $(this);
        return false;
      }
    });

    // 更新手风琴项的样式
    $('.accordion-item').removeClass('active');
    $activeItem.addClass('active');
  });
});

这个插件使用CSS的scroll-snap-type和scroll-snap-align属性来实现手风琴效果，使用jQuery监听滚动事件并计算当前选中的手风琴项，最后更新手风琴项的样式来实现手风琴效果。你可以根据具体需求对CSS和jQuery代码进行调整。