JS实现时间轴自动播放

2023年5月27日下午4:21 • JavaScript

下面我来详细讲解JS实现时间轴自动播放的完整攻略：

1. HTML结构

我们先来看一下时间轴的HTML结构，通常是由一系列时间节点（比如一段时间内的事件）以及连接这些时间节点的线条构成。因此，我们可以使用无序列表（<ul>）来创建这些时间节点，而每个时间节点的连接线条可以使用CSS的伪元素::before来实现。HTML代码大致如下：

<ul class="timeline">
  <li class="timeline-item">
    <div class="timeline-content">
      <h3 class="timeline-title">标题1</h3>
      <p>内容1</p>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-content">
      <h3 class="timeline-title">标题2</h3>
      <p>内容2</p>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-content">
      <h3 class="timeline-title">标题3</h3>
      <p>内容3</p>
    </div>
  </li>
  <!-- ... 其他时间节点 ... -->
</ul>

需要注意的是，这里的时间节点可以是任何HTML元素，不一定非要使用<li>元素。

2. CSS样式

接下来，我们需要为时间轴添加CSS样式，可以设置时间节点和连接线条的样式，以及整个时间轴的布局和样式。CSS代码大致如下：

.timeline {
  position: relative;
  margin: 0 auto;
  padding: 50px 0;
  list-style: none;
  max-width: 810px;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background-color: #ddd;
}

.timeline-item {
  position: relative;
  margin-bottom: 50px;
  width: 100%;
}

.timeline-item::before {
  content: '';
  position: absolute;
  top: 10px;
  left: -27px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #ddd;
}

.timeline-item::after {
  content: '';
  position: absolute;
  top: 34px;
  left: -27px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #ddd;
}

.timeline-content {
  position: relative;
  width: 100%;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 5px;
}

.timeline-title {
  margin-top: 0;
}

需要注意的是，这里的样式代码只是一个基础版本，根据实际需求可以进行各种扩展和修改。

3. JS实现

最后，我们需要使用JS来实现时间轴的自动播放。具体实现思路是：通过.timeline-item元素的offsetTop属性获得每个时间节点相对于整个页面的top偏移，然后使用window.scroll()方法将页面滚动到该位置，从而实现自动播放。

下面是示例代码：

const timelineItems = document.querySelectorAll('.timeline-item');

let itemIndex = 0;

// 每隔2秒自动切换到下一个时间节点
let intervalId = setInterval(() => {
  window.scroll({
    top: timelineItems[itemIndex].offsetTop,
    behavior: 'smooth'
  });
  itemIndex++;

  if (itemIndex === timelineItems.length) {
    clearInterval(intervalId);
  }
}, 2000);

在这个示例中，我们使用setInterval()函数，每隔2秒自动播放下一个时间节点。当所有时间节点都播放完毕之后，我们通过clearInterval()方法停止自动播放。

另外，我们使用了scroll()方法，将整个页面滚动到指定的时间节点处，behavior: 'smooth'参数表示滚动过程会平滑过渡。