原生JavaScript轮播图

朴灿烈づ我的快乐病毒、 2023-06-13 04:55 1阅读 0赞

HTML

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="box" onmouseenter="mouseEnter()" onmouseleave="mouseLeave()">
            <ul id="pics">
                <li>
                    <img src="img/0.jpg" alt="" width="800" height="600" id="0">
                </li>
                <li>
                    <img src="img/1.jpg" alt="" width="800" height="600" id="1">
                </li>
                <li>
                    <img src="img/2.jpg" alt="" width="800" height="600" id="2">
                </li>
                <li>
                    <img src="img/3.jpg" alt="" width="800" height="600" id="3">
                </li>
                <li>
                    <img src="img/4.jpg" alt="" width="800" height="600" id="4">
                </li>
            </ul>
            <ul id="nav">
                <li>
                    <a href="javascript:void(0);" onclick="changeByA(0)"></a>
                </li>
                <li>
                    <a href="javascript:void(0);" onclick="changeByA(1)"></a>
                </li>
                <li>
                    <a href="javascript:void(0);" onclick="changeByA(2)"></a>
                </li>
                <li>
                    <a href="javascript:void(0);" onclick="changeByA(3)"></a>
                </li>
                <li>
                    <a href="javascript:void(0);" onclick="changeByA(4)"></a>
                </li>
            </ul>
            <div id="left" >
                <a href="javascript:void(0);" onclick="changeBefore()">
                    <img src="img/left.png" alt="">
                </a>
            </div>
            <div id="right">
                <a href="javascript:void(0);" onclick="change()">
                    <img src="img/right.png" alt="">
                </a>
            </div>
        </div>
        <script type="text/javascript" src="js/js.js"></script>
    </body>
    </html>

CSS

.box{
        
        width:950px;
        position: relative;
        margin:0 auto;
        padding-left:0;
    }
    ul{
        
        list-style-type: none;
    }
    #pics img{
        
        margin-left: 35px;
        display:none;
    }
    #nav{
        
        list-style-type: none;
        width:80px;
        height:20px;
        background-color: grey;
        opacity: 0.5;
        padding:0;
        border-radius: 10px;
        position:absolute;
        left:450px;
        top:550px;
        z-index: 1;
        display:none;
    }
    #nav li{
        
        display: inline-block;
        margin-top:0;
        padding-top:0;
    }
    #nav li a{
        
        display:inline-block;
        background-color: white;
        width:10px;
        height:10px;
        border-radius: 50%;
        margin-left:2px;
        margin-top:0px;
        padding-top:0px;
    }
    #left,#right{
        
        margin-top:-350px;
        positon:absolute;
        top:100px;
        z-index: 1000;
        display: none;
    }
    #left a img,#right a img{
        
        width:50px;
        height:50px;
        background-color: grey;
        oacity:0.5;
        border-radius: 50%;
    }
    #left{
        
        float:left;
    }
    #right{
        
        float:right;
    }

JavaScript