js实现留言轮播

实现留言轮播的基本思路

使用JavaScript实现留言轮播的核心在于定时切换显示的留言内容。可以通过CSS控制动画效果，JavaScript负责定时更新内容。

HTML结构准备

创建基本的HTML结构，包含一个容器用于显示留言内容：

<div class="message-container">
  <div class="message-slider">
    <div class="message-item">留言1：这个产品很好用！</div>
    <div class="message-item">留言2：服务态度很棒！</div>
    <div class="message-item">留言3：物流速度很快！</div>
  </div>
</div>

CSS样式设置

为留言轮播添加基本样式，包括容器大小和动画效果：

.message-container {
  width: 100%;
  height: 60px;
  overflow: hidden;
  position: relative;
}

.message-slider {
  position: absolute;
  width: 100%;
  transition: transform 0.5s ease;
}

.message-item {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

JavaScript实现轮播逻辑

使用JavaScript控制轮播的自动切换：

document.addEventListener('DOMContentLoaded', function() {
  const slider = document.querySelector('.message-slider');
  const items = document.querySelectorAll('.message-item');
  let currentIndex = 0;
  const itemHeight = items[0].offsetHeight;

  function slideNext() {
    currentIndex = (currentIndex + 1) % items.length;
    slider.style.transform = `translateY(-${currentIndex * itemHeight}px)`;
  }

  // 设置自动轮播间隔
  setInterval(slideNext, 3000);
});

增强版实现

增加平滑过渡和无限循环效果：

document.addEventListener('DOMContentLoaded', function() {
  const slider = document.querySelector('.message-slider');
  const items = document.querySelectorAll('.message-item');
  let currentIndex = 0;
  const itemHeight = items[0].offsetHeight;

  // 克隆第一个元素添加到末尾实现无缝循环
  const firstItem = items[0].cloneNode(true);
  slider.appendChild(firstItem);

  function slideNext() {
    currentIndex++;
    slider.style.transition = 'transform 0.5s ease';
    slider.style.transform = `translateY(-${currentIndex * itemHeight}px)`;

    // 当到达克隆元素时，无动画跳回第一个元素
    if (currentIndex === items.length) {
      setTimeout(() => {
        slider.style.transition = 'none';
        currentIndex = 0;
        slider.style.transform = `translateY(0)`;
      }, 500);
    }
  }

  setInterval(slideNext, 3000);
});

响应式处理

添加窗口大小变化时的自适应处理：

function updateSliderHeight() {
  const itemHeight = document.querySelector('.message-item').offsetHeight;
  document.querySelector('.message-container').style.height = `${itemHeight}px`;
}

window.addEventListener('resize', updateSliderHeight);
updateSliderHeight();

可选功能扩展

添加鼠标悬停暂停功能：

let slideInterval = setInterval(slideNext, 3000);

document.querySelector('.message-container').addEventListener('mouseenter', () => {
  clearInterval(slideInterval);
});

document.querySelector('.message-container').addEventListener('mouseleave', () => {
  slideInterval = setInterval(slideNext, 3000);
});

使用第三方库简化实现

如果需要更复杂的效果，可以考虑使用Swiper等专业轮播库：

import Swiper from 'swiper';

new Swiper('.message-container', {
  direction: 'vertical',
  loop: true,
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
});

以上实现方法可以根据实际需求进行调整和扩展，包括修改动画时间、切换效果或添加导航控制等。