用js实现图片手风琴效果

你好！感谢你的提问，我会尽力回答。以下是用JS实现图片手风琴效果的步骤：

1. 首先在HTML中创建一个包含多张图片的容器，可以使用ul和li标签来实现。

2. 给每张图片绑定一个点击事件，当点击某张图片时，将该图片放大并使其居中展示，同时缩小其他图片。

3. 可以通过CSS样式或JS动态修改图片的大小和位置，实现手风琴效果。

下面是一个简单的示例代码：

HTML代码：

<ul class="accordion">
  <li>
    <img src="img1.jpg">
  </li>
  <li>
    <img src="img2.jpg">
  </li>
  <li>
    <img src="img3.jpg">
  </li>
</ul>

CSS样式：

.accordion li {
  float: left;
  width: 20%;
  height: 100px;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
}

.accordion li img {
  transition: all 0.5s ease-in-out;
}

.accordion li.active img {
  transform: scale(1.2);
  margin-top: -10px;
}

JS代码：

const lis = document.querySelectorAll('.accordion li');

for (let i = 0; i < lis.length; i++) {
  const li = lis[i];

  li.addEventListener('click', function() {
    for (let j = 0; j < lis.length; j++) {
      const otherLi = lis[j];
      if (otherLi !== li) {
        otherLi.classList.remove('active');
        otherLi.querySelector('img').style.transform = '';
        otherLi.querySelector('img').style.marginTop = '';
      }
    }
    li.classList.add('active');
    li.querySelector('img').style.transform = 'scale(1.2)';
    li.querySelector('img').style.marginTop = '-10px';
  });
}

希望这能帮助到你！如果还有其他问题，请随时问我。