master

分支 (1)

管理

管理

master

NetEase-Cloud-Carousel-Picture-
/
仿网易云轮播图.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>网易云音乐轮播图实现</title>
  <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
  <link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
  <div class="carousel">
    <ul>
      <span class="iconfont prev">&#xe600;</span>
      <span class="iconfont next">&#xe601;</span>
      <li class="now"><img src="https://i.loli.net/2019/11/16/cqyJiYlRwnTeHmj.jpg" alt="img1" /></li>
      <li class="after"><img src="https://i.loli.net/2019/10/18/Ujf6n75o8TtIsWX.jpg" alt="img2" /></li>
      <li><img src="https://i.loli.net/2019/10/18/buDT4YS6zUMfHst.jpg" alt="img3" /></li>
      <li><img src="https://i.loli.net/2019/10/18/uXF1Kx7lzELB6wf.jpg" alt="img4" /></li>
      <li><img src="https://i.loli.net/2019/11/03/RtVq2wxQYySDb8L.jpg" alt="img5" /></li>
      <li class="before"><img src="https://i.loli.net/2019/11/16/FLnzi5Kq4tkRZSm.jpg" alt="img6" /></li>
    </ul>
    <div class="lines">
      <div class="active-line line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>
  </div>
</body>
<script src="js/index.js"></script>
</html>