实例详解如何给轮播图做自适应的高度

<div class="container">
  <div class="wrapper">
    <div class="swiper">
      <div class="item">
        <img src="https://ci.xiaohongshu.com/776d1cc7-ff36-5881-ad8f-12a5cd1c3ab3?imageView2/2/w/1080/fORMat/jpg" alt="">
      </div>
      <div class="item">
        <img src="Https://ci.xiaohongshu.com/b8e16620-66a0-79a5-8a4b-5bfee1028554?imageView2/2/w/1080/format/jpg" alt="">
      </div>
      <div class="item">
        <img src="https://ci.xiaohongshu.com/e12013c2-3c46-a2cc-7fda-1e0b20b36f3D?imageView2/2/w/1080/format/jpg" alt="">
      </div>
    </div>
  </div>
  <div class="content">这是一段内容</div>
</div>

.container {
  width: 100%;
  overflow: hidden;
}.wrapper {
  width: 100%;
}.swiper {
  font-size: 0;
  white-space: nowrap;
}.item {
  display: inline-block;
  width: 100%;
  vertical-align: top; // 一定要使用顶部对齐，不然会出现错位的情况
}.item img {
  width: 100%;
  height: auto;
  display: block;
}.content {
  position: relative;
  z-index: 9;
  font-size: 14px;
  text-align: center;
  padding-top: 20px;
  background-color: #fff;
  height: 200px;
}

const data = {
  ele: null,
  width: 0,
  len: 0,
  proportion: .3,
  type: false,
  heights: [500, 250, 375],
  currentIndex: 0,
  startOffset: 0,
  clientX: 0,
  distanceX: 0,
  duration: 30,
  touching: false
}

const wrapper = data.ele = document.querySelector('.wrapper')
const items = document.querySelectorAll('.item')
data.width = wrapper.offsetWidth
data.len = items.length - 1
wrapper.addEventListener('touchstart', onStart)
wrapper.addEventListener('mousedown', onStart)

function onStart(event) {
  if (event.type === 'mousedown' && event.which !== 1) return
  if (event.type === 'touchstart' && event.touches.length > 1) return
  data.type = event.type === 'touchstart'
  const events = data.type ? event.touches[0] || event : event

  data.touching = true
  data.clientX = events.clientX
  data.startOffset = data.currentIndex * -data.width

  data.ele.style.transition = `none`
  window.addEventListener(data.type ? 'touchmove' : 'mousemove', onMove, { passive: false })
  window.addEventListener(data.type ? 'touchend' : 'mouseup', onEnd, false)
}

function onMove(event) {
  event.preventDefault()
  if (!data.touching) return
  const events = data.type ? event.touches[0] || event : event

  data.distanceX = events.clientX - data.clientX

  let translatex = data.startOffset + data.distanceX
  if (translatex > 0) {
    translatex = translatex > 30 ? 30 : translatex
  } else {
    const d = -(data.len * data.width + 30)
    translatex = translatex < d ? d : translatex
  }

  data.ele.style.transform = `translate3d(${translatex}px, 0, 0)`
  data.ele.style.WEBkitTransform = `translate3d(${translatex}px, 0, 0)`
}

function onEnd() {
  if (!data.touching) return
  data.touching = false

  // 通过计算 proportion 滑动的阈值拿到释放后的索引
  if (Math.abs(data.distanceX) > data.width * data.proportion) {
    data.currentIndex -= data.distanceX / Math.abs(data.distanceX)
  }
  if (data.currentIndex < 0) {
    data.currentIndex = 0
  } else if (data.currentIndex > data.len) {
    data.currentIndex = data.len
  }
  const translatex = data.currentIndex * -data.width

  data.ele.style.transition = 'all .3s ease'
  data.ele.style.transform = `translate3d(${translatex}px, 0, 0)`
  data.ele.style.webkitTransform = `translate3d(${translatex}px, 0, 0)`

  window.removeEventListener(data.type ? 'touchmove' : 'mousemove', onMove, { passive: false })
  window.removeEventListener(data.type ? 'touchend' : 'mouseup', onEnd, false)
}

const index = data.currentIndex
const currentHeight = data.heights[index]
    
// 判断手指滑动的方向拿到下一张图片的高度
let nextHeight = data.distanceX > 0 ? data.heights[index - 1] : data.heights[index + 1]
let diffHeight = Math.abs((nextHeight - currentHeight) * (data.distanceX / data.width))
let realHeight = currentHeight + (nextHeight - currentHeight > 0 ? diffHeight : -diffHeight) 
 data.ele.style.height = `${realHeight}px`

// ... 因为上面已经拿到了下一张的索引 currentIndex
const currentHeight = data.heights[data.currentIndex]

data.ele.style.height = `${currentHeight}px`