JS—实现轮播图-CSDN博客

本文链接：https://blog.csdn.net/m0_46546292/article/details/120642285
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../studyDirectory/css进阶/clear.css">
    <style>
         div {
            width: 530px;
            height: 300px;
            border: 1px solid gray;
            /*父相子绝*/
            position: relative;
            margin: 0 auto;
        }
          /*图片样式*/
        .pic {
            position: absolute;
            float: top;
        }

        /*左右箭头大ul*/
        .btn {
            position: absolute;
            top: 125px;
            color: white;
            /*箭头往上移动25px*/
            /*transform: translateY(-25px);*/
        }

        /*箭头样式*/
        .btn li {
            width: 50px;
            height: 50px;
            /*background-color: skyblue;*/
            position: absolute;
            /*水平居中*/
            text-align: center;
            /*垂直居中*/
            line-height: 50px;
            border-radius: 50%;
        }
        .btn .left {
            left: 0;
        }
        .btn .right {
            left: 480px;
        }
        /*小圆点*/
        .tab {
            position: absolute;
            bottom: 20px;
            /*left: 245px;*/
            left: 50%;
            transform: translateX(-50%);
        }
        .tab li {
            float: left;
            width: 10px;
            height: 10px;
            background-color: orange;
            border-radius: 50%;
            margin-left: 5px;
            border: 2px skyblue solid;
        }
        .tab li:hover {
            background-color: skyblue;
            border: 2px orange solid;
            /*鼠标小手*/
            cursor: pointer;
        }
        .pic li{
            display: none;
        }
        .pic .show{
            display: block;
        }

    </style>
</head>
<body>
<div>
    <ul class="pic">
        <li class="show"><img src="../image/01.jpg" alt=""></li>
         <li ><img src="../image/02.jpg" alt=""></li>
         <li ><img src="../image/03.jpg" alt=""></li>
         <li ><img src="../image/04.jpg" alt=""></li>

    </ul>
    <ul class="btn">
        <li class="left">&lt;</li>
        <li class="right">&gt;</li>
    </ul>
    <ul class="tab">
        <li id="btn1"></li>
        <li id="btn2"></li>
        <li id="btn3"></li>
        <li id="btn4"></li>
    </ul>
</div>
<Script>
    var obt = document.querySelectorAll(".tab li")
    var abt = document.querySelectorAll(".pic li")
    for (let i= 0;i<abt.length;i++){
         //循环是循环完的
         obt[i].onmouseenter= function () {
             ///先清除 属性
             //点击到的 才加效果
             for(let j = 0;j<abt.length;j++){
                 obt[j].className = "show"
                 abt[j].className = "on"
             }

             abt[i].className = "show"
         }
     }

</Script>
</body>
</html>
左右箭头滑动还未实现，用jq继续完善·