如何使用 JavaScript 创建评论轮播？

评论轮播是一个常见的网站特效，它可以让多个评论在一个小窗口内无限循环轮播展现。本文将介绍如何使用 JavaScript 实现简单的评论轮播。

基本思路

创建评论轮播的基本思路如下：

1. 创建一个容器 div，设置其样式为固定宽高，overflow:hidden；
2. 在 div 内部创建一个 ul，设置其样式为 position:absolute，left:0，top:0，width:400%；
3. 在 ul 中添加多个 li，每个 li 显示一条评论；
4. 使用 JavaScript 定时将 ul 向左移动一个 li 的宽度，模拟轮播效果。

代码实现

下面是一个简单的评论轮播实现代码：

<div class="slider-container">
  <ul class="comments-list">
    <li>第一条评论内容</li>
    <li>第二条评论内容</li>
    <li>第三条评论内容</li>
    <li>第四条评论内容</li>
    <li>第五条评论内容</li>
  </ul>
</div>

<style>
  .slider-container {
    width: 500px;
    height: 120px;
    overflow: hidden;
    position: relative;
  }

  .comments-list {
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    animation: slide 10s infinite linear;
  }

  .comments-list li {
    width: 50%;
    height: 120px;
    float: left;
    box-sizing: border-box;
    padding: 20px;
  }

  @keyframes slide {
    0% {
      left: 0;
    }
    100% {
      left: -100%;
    }
  }
</style>

<script>
  // 在 10 秒钟内轮播一次，每秒钟移动 10%
  setInterval(function() {
    var list = document.querySelector('.comments-list');
    list.style.left = '-50%';
    setTimeout(function() {
      list.appendChild(list.firstElementChild);
      list.style.left = '0';
    }, 500);
  }, 10000);
</script>

这段代码创建了一个宽度为 500px、高度为 120px 的固定宽高容器，其中包含一个宽度为 200% 的 ul，以及多个宽度为 50% 的 li 子元素。在样式中定义了一个名为 slide 的动画，使 ul 延 x 轴方向向左滑动 100% 的距离，然后使用 setInterval 函数每隔 10 秒钟执行一次 li 切换的操作。

在 JavaScript 中，为了实现滑动效果，我们首先将 ul 向左移动一个 li 的宽度，然后通过 setTimeout 函数将 ul 的第一个元素移到最后一个元素的后面，最后将 ul 展示到原位。

总结

通过本文的介绍，我们学会了如何使用 JavaScript 实现简单的评论轮播特效。在实践中，我们可以根据需要修改轮播容器的宽度、高度、样式等，并通过 JavaScript 修改轮播的间隔时间、滑动距离、动画效果等。