一、效果展示

二、代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>京东轮播图（不完全）</title>
    <style>
      /* 清除所有边界 */
      * {
        padding: 0px;
        margin: 0px;
      }

      ul {
        /* 设置高度与宽度 */
        width: 350px;
        height: 350px;
        /* 设置父类定位，方便后面定位 */
        position: relative;
        /* 设置定位边界 */
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        /* 居中 */
        margin: 50px auto;
      }
      li {
        /* 设置绝对定位 */
        position: absolute;
        /* 清除列表点 */
        list-style: none;
      }
      .point {
        /* 设置绝对定位 */
        position: absolute;
        /* 将point点层级变为最高 */
        z-index: 999;
        /* 设置point位置 */
        bottom: 10px;
        left: 10px;
      }
      .point a {
        /* 设置点的分隔 */
        margin-right: 5px;
        /* 浮动变为行相邻 */
        float: left;
        /* 设置高度与宽度 */
        width: 10px;
        height: 10px;
        /* 设置背景颜色 */
        background-color: white;
        /* 变为圆轮廓 */
        border-radius: 50%;
        /* 背景颜色只设置内容，不涉及边界 */
        background-clip: content-box;
        /* 防止设置边界导致元素移动，transparent就是为了透明不显示边界 */
        border: 2px solid transparent;
      }
      .point a:hover {
        /* 设置透明边界 */
        border: 2px solid rgba(255, 255, 255, 0.3);
      }
      /* 选中第二个图片，将它层级提高 */
      .all :nth-child(2) {
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <ul class="all">
      <div class="point">
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
      </div>
      <li>
        <a
          href="https://item.jd.com/100024444786.html?extension_id=eyJhZCI6IiIsImNoIjoiIiwic2hvcCI6IiIsInNrdSI6IiIsInRzIjoiIiwidW5pcWlkIjoie1wiY2xpY2tfaWRcIjpcIjc0MjI0ZjdjLTA4NzEtNGRlNi05M2ZlLTk1ZWExZjFlYWM0MVwiLFwibWF0ZXJpYWxfaWRcIjpcIjcwNjM1NTkyNDNcIixcInBvc19pZFwiOlwiMzUwM1wiLFwic2lkXCI6XCI5YzkyZTRkZC1hZDc1LTQ2MTMtYTlmNi0wYjA1Y2ZhMDZjOTBcIn0ifQ==&jd_pop=74224f7c-0871-4de6-93fe-95ea1f1eac41&abt=1"
        >
          <img src="../src/fans.jpg" alt="格力风扇" />
        </a>
      </li>
      <li>
        <a
          href="https://item.jd.com/28932703638.html?extension_id=eyJhZCI6IjM1MDQiLCJjaCI6IjIiLCJzaG9wIjoiODAzNzAzIiwidHMiOiIxNjU5NjA5MTYzIiwidW5pcWlkIjoie1wiY2xpY2tfaWRcIjpcIjNhNGI5ZmMyLWFkNjMtNGUyMS04YmI3LThjNDlkNWM1N2RkZVwiLFwibWF0ZXJpYWxfaWRcIjpcIjY3MjM3MDExODZcIixcInBvc19pZFwiOlwiMzUwNFwiLFwic2lkXCI6XCI2M2Q5NDNkZC00YTQwLTRhNWUtYWUyYS00MWQ1ZDMzMDliZDZcIn0ifQ==&jd_pop=3a4b9fc2-ad63-4e21-8bb7-8c49d5c57dde&abt=1"
        >
          <img src="../src/tea.jpg" alt="茶叶" />
        </a>
      </li>
      <li>
        <a
          href="https://pro.jd.com/mall/active/3ZYfZKGRAhbHzJySpRriJoGWo8v6/index.html?innerAnchor=100013964134&focus=3"
        >
          <img src="../src/air-condition.jpg" alt="空调" />
        </a>
      </li>
    </ul>
  </body>
</html>
前端练习--京东轮播图（不完全）

一、效果展示

二、代码

猜你喜欢
