使幻灯片滑出到图标img

<div class="slider-container">
  <div class="slider">
    <!-- 幻灯片内容 -->
  </div>
  <img src="icon.png" alt="图标" class="slider-icon">
</div>

.slider-container {
  position: relative;
  overflow: hidden;
}

.slider {
  position: absolute;
  top: 0;
  left: -100%; /* 初始位置在屏幕左侧 */
  transition: left 0.5s ease; /* 添加过渡效果 */
}

.slider-icon {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  cursor: pointer;
}

const slider = document.querySelector('.slider');
const sliderIcon = document.querySelector('.slider-icon');

sliderIcon.addEventListener('click', () => {
  slider.style.left = '0'; // 幻灯片滑出到屏幕左侧
});

sliderIcon.addEventListener('mouseenter', () => {
  slider.style.left = '0'; // 幻灯片滑出到屏幕左侧
});

sliderIcon.addEventListener('mouseleave', () => {
  slider.style.left = '-100%'; // 幻灯片滑回到屏幕左侧
});