js轮播图,纯源码

分手后的思念是犯贱 2023-07-15 13:19 32阅读 0赞

最近也是在学js所以就做了个轮播图来玩玩

CSS-------------------

* { 
        padding: 0;
        margin: 0;
    }
    
    .box img { 
        width: 700px;
        height: 400px;
    }
    
    .box { 
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        width: 700px;
        height: 400px;
        overflow: hidden;
        /* border: 2px solid red; */
    }
    
    .box1 { 
        position: absolute;
        height: 400px;
        display: flex;
    }
    
    .left { 
        position: absolute;
        background-color: black;
        width: 30px;
        height: 40px;
        opacity: .7;
        top: 190px;
        cursor: pointer;
        z-index: 22;
    }
    
    .right { 
        position: absolute;
        background-color: black;
        width: 30px;
        height: 40px;
        opacity: .7;
        right: 0px;
        top: 190px;
        cursor: pointer;
        z-index: 22;
    }
    
    .circle { 
        border-radius: 50%;
        position: absolute;
        left: 300px;
        bottom: 10px;
        display: flex;
    }
    
    .circle li { 
        list-style: none;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: pink;
        margin-left: 5px;
        cursor: pointer;
    }

JS代码

HTML------

</head>
    
    <body>
        <div class="box">
            <div class="left"></div>
            <div class="right"></div>
            <div class="box1">
                <img src="image/1.jpg" alt="">
                <img src="image/2.jpg" alt="">
                <img src="image/3.jpg" alt="">
                <img src="image/4.jpg" alt="">
                <img src="image/5.jpg" alt="">
                <img src="image/1.jpg" alt="">
            </div>
            <ol class="circle">
            </ol>
        </div>
    </body>

这个js和图片都是放在文件例来的,用的时候要引入  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY1ODk4NA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY1ODk4NA_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY1ODk4NA_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY1ODk4NA_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY1ODk4NA_size_16_color_FFFFFF_t_70 4]  
图片是上网找的,侵删;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY1ODk4NA_size_16_color_FFFFFF_t_70]: /images/20230528/16ddef487508411fa8433f217e9cda58.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY1ODk4NA_size_16_color_FFFFFF_t_70 1]: /images/20230528/2b03970911cf4a2a9063fcc46bab7d25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY1ODk4NA_size_16_color_FFFFFF_t_70 2]: /images/20230528/61fcd74067714b7980b18fbec395c90b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY1ODk4NA_size_16_color_FFFFFF_t_70 3]: /images/20230528/10aa31c09485447a8d51b5ad44aad759.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY1ODk4NA_size_16_color_FFFFFF_t_70 4]: /images/20230528/784454a5bacb4086916bd3dce8ee33c9.png