html:
    （1）使用ul>li 来装图片和链接

    （2）pointer写在ul里面，同时把超链接写在pointer里面
    代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <link rel="stylesheet" href="../css/reset.css">
    8.     <link rel="stylesheet" href="../css/75京东轮播图.css">
    9. </head>
    10. <body>
    11.     <ul class="list-img">
    12.         <li>
    13.             <img src="../img/1.jpg" alt="1jpg">
    14.         </li>
    15.         <li>
    16.             <img src="../img/2.jpg" alt="2jpg">
    17.         </li>
    18.         <li>
    19.             <img src="../img/3.jpg" alt="3jpg">
    20.         </li>
    21.         <li>
    22.             <img src="../img/4.jpg" alt="4jpg">
    23.         </li>
    24.         <li>
    25.             <img src="../img/5.jpg" alt="5jpg">
    26.         </li>
    27.         <li>
    28.             <img src="../img/6.jpg" alt="6jpg">
    29.         </li>
    30.         <li>
    31.             <img src="../img/7.jpg" alt="7jpg">
    32.         </li>
    33.         <li>
    34.             <img src="../img/8.jpg" alt="8jpg">
    35.         </li>
    37.         <div class="pointer">
    38.             <a href="javascript:;"></a>
    39.             <a href="javascript:;"></a>
    40.             <a href="javascript:;"></a>
    41.             <a href="javascript:;"></a>
    42.             <a href="javascript:;"></a>
    43.             <a href="javascript:;"></a>
    44.             <a href="javascript:;"></a>
    45.             <a href="javascript:;"></a>
    46.         </div>
    48.     </ul>
    50. </body>

    css:
    （1）得将主元素.list-img，设置好大小和位置，并设定position:relative;方便后续的子孙元素参照定位
    （2）设置li，为position: absolute;因此会直接脱离文档流，但因为祖先元素已经设置位置，所以会限制到里面
    且设置了absolute之后，会脱离文档流，七张图片叠在了一块，最后的叠在最上面，所以使用z-index,设置第一个图片为最上层显示
    （3）设置pointer,设置好位置，位置由块元素来设置，样式由行内元素设置，如果不首先对祖先元素进行position设定和位置设定，那么此时会找不到pointer在哪。一般来说找不到位置了。
    （4）设置超链接，先设置大小，然后因为是圆形，设置border-radius: 50%；即可
    （5）最后对hover进行设置，使用background-clip: content-box;只对内容进行颜色渲染，不对外边框进行渲染
    代码：

    .list-img {
    width: 590px;
    height: 470px;
    position: relative;
    margin:100px auto;
}


.list-img li{
    position: absolute;
}

.list-img  :first-child {
    z-index: 1;
}

.pointer {
    position:absolute;
    z-index: 999;
    left: 30px;
    bottom: 20px;
}

.pointer a{
    width: 10px;
    height: 10px;
    background-color: rgba(170,135,122,0.6);
    border-radius: 50%;
    float: left;
    margin-left: 5px;
} 

a:hover {
    background-color: white;
    background-clip: content-box;
    border: 1px solid rgb(139,143,148);
}

.active{
    background-color: white;
    background-clip: content-box;
    border: 1px solid rgb(139,143,148);
}

    image.png