关于html:写一个简单的时间轴

利用相对路径以及动静 left 的大小展现不同工夫对应的图片

<div className="timeLine">
  <div className="cList">
    <ul className="cUl" style={{left: currentIndex * 1800 + "px"}}>
      {list.map((v, index) => (<li key={index} style={{left: index * -1800 + "px"}}>
          <div className="container-li">
            <div className="li-left">
              <img src={v.img} alt=""width="100%"height="100%"/>
            </div>
            <div className="li-right">
              <h4>{v.date}</h4>
              <p>{v.text}</p>
            </div>
          </div>
        </li>
      ))}
    </ul>
  </div>{" "}
  <div className="yearList">
    <ul>
      {dateList.map((v, index) => (
        <li
          className={[index === currentIndex ? "year-active" : ""]}
          key={index}
          onClick={this.onchange.bind(this, index)}
        >
          {v}
        </li>
      ))}
    </ul>
  </div>
</div>

ul li {list-style: none;}
.timeLine {height: 300px;}
.cList {
  width: 100%;
  position: relative;
}
.cUl {
  width: 100%;
  height: 190px;
  margin: 0 auto;
  position: relative;
  left: 0px;
}

.cUl li {
  width: 100%;
  position: absolute;
  padding: 8px 0;
}
.container-li {
  display: flex;
  align-items: center;
}
.yearList {
  width: 100%;
  list-style: none;
  position: relative;
  z-index: 5;
  margin-bottom: 0;
}

.yearList ul {height: 30px;}
.yearList li {
  float: left;
  height: 100%;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  line-height: 30px;
  width: 30%;
}

.year-active {
  background: #6478a4;
  color: white;
}