js div上下滑动效果

<div class="slider">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
</div>
<button onclick="slideUp()">Slide Up</button>
<button onclick="slideDown()">Slide Down</button>

.slider {
  overflow: hidden;
  height: 50px; /* 根据需要调整高度 */
  position: relative;
}

.slide {
  transition: transform 0.5s ease-in-out;
  position: absolute;
  width: 100%;
}

.slide:nth-child(2) {
  transform: translateY(100%);
}

function slideUp() {
  const slides = document.querySelectorAll('.slide');
  slides[1].style.transform = 'translateY(0)';
  slides[0].style.transform = 'translateY(-100%)';
}

function slideDown() {
  const slides = document.querySelectorAll('.slide');
  slides[1].style.transform = 'translateY(100%)';
  slides[0].style.transform = 'translateY(0)';
}