JavaScriptDemo——Day 22（Banner）

比眉伴天荒 2023-07-21 14:29 20阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="wrapper">
            <ul class="list">
                <li class="ele"><img src="images/a1.jpg" alt=""></li>
                <li class="ele"><img src="images/a2.jpg" alt=""></li>
                <li class="ele"><img src="images/a3.jpg" alt=""></li>
                <li class="ele"><img src="images/a4.jpg" alt=""></li>
                <li class="ele"><img src="images/a5.jpg" alt=""></li>
                <li class="ele"><img src="images/a1.jpg" alt=""></li>
            </ul>
    
            <button class="prev"></button>
            <button class="next"></button>
    
            <ul class="btn">
                <li class="dot active"></li>
                <li class="dot"></li>
                <li class="dot"></li>
                <li class="dot"></li>
                <li class="dot"></li>
                <span>1 / 5</span>
            </ul>
           
        </div>
        
    
    
        <script src="main.js"></script>
    </body>
    </html>

*{
        
        padding: 0px;
        margin: 0px;
        list-style: none;
    }
    
    .wrapper {
        
        width: 800px;
        height: 400px;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
    }
    
    .wrapper .list{
        
        position: absolute;
        width: 4800px;
        height: 100%;
        left: 0;
        top: 0;
    }
    
    .wrapper .list .ele{
        
        width: 800px;
        height: 400px;
        float: left;
    }
    
    .wrapper .list .ele img{
        
        width: 100%;
        height: 100%;
        background-size: cover;   
    }
    
    .wrapper .btn{
        
        position: absolute;
        left: 50%;
        bottom: 5px;
        transform: translate(-50%);
    }
    
    .wrapper .btn::after{
        
        content: "";
        display: block;
        clear: both;
    }
    
    .wrapper .btn li{
        
        border: 1px solid black;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        float: left;
        margin-left: 3px;
        cursor: pointer;    
    }
    .wrapper .btn span{
        
        display: block;
        margin: 0 auto;
        text-align: center;
        font-size: 14px;
        font-family: Arial;
        color: #341f97;
    }
    
    .wrapper .btn .active{
        
        height: 15px;
        width: 15px;
        background-color: black;
    }
    
    .wrapper .next{
        
        position: absolute;
        display: none;
        border: 1px solid transparent;
        width: 50px;
        height: 50px;
        background: url(images/next.png) no-repeat;
        background-size: cover;
        cursor: pointer;
        outline: none;
        right: 0;
        top: 175px;   
    }
    
    .wrapper .prev{
        
        position: absolute;
        display: none;
        border: 1px solid transparent;
        width: 50px;
        height: 50px;
        background: url(images/prev.png) no-repeat;
        background-size: cover;
        cursor: pointer;
        outline: none;
        left: 0;
        top: 175px;
    }
    
    .wrapper:hover .prev{
        
        display: block;
    }
    .wrapper:hover .next{
        
        display: block;
    }