轮播图（html+css+js）

ゝ一纸荒年。 2023-07-01 13:59 6阅读 0赞

前端知识：实现一个简单的轮播图。  
直接上代码：  
html 代码

<!DOCTYPE html >
    <html>
    <head>
    <meta charset="UTF-8">
        <title>轮播图</title>
        <link href="css/lunbo.css" type="text/css" rel="stylesheet">
    </head>
    <body>
    <div class="lb_body">
     <div class="lb_cont" style = "position:relative;left:0px;">
      <ul>
       <li> <img src = "img/2.jpg"> </li>
       <li> <img src = "img/3.jpg"> </li>
       <li> <img src = "img/4.jpg"> </li>
       <li> <img src = "img/5.jpg"> </li>
       <li> <img src = "img/6.jpg"> </li>
      </ul>
     </div>
     <div  class = "img_box">
      <div class = "perimg">  <img src="img/pre.png"> </div>
      <div class = "nextimg"> <img src="img/next.png"> </div>
     </div>
     <div class = "li_box"> </div>
    </div>
    <script src="js/lunbo.js"></script>
    </body>
    </html>

CSS代码

*{ 
     padding:0px;
     margin:0px;
    }
    .lb_body{ 
     width:600px;
     height:300px;
     overflow:hidden;
     margin:200px auto;
     position:relative;
    }
    .lb_body .img_box{ 
     position:absolute;
     top:110px;
     width:100%;
     display:flex;
     justify-content:space-between;
    }
    .lb_body .img_box .perimg{ 
     position:relative;
     left:10px;
     opacity:0.7;
    }
    .lb_body .img_box .perimg:hover{ 
     opacity:1;
    }
    .lb_body .img_box .nextimg{ 
     position:relative;
     right:10px;
     opacity:0.7;
    }
    .lb_body .img_box .nextimg:hover{ 
     opacity:1;
    }
    .lb_body .lb_cont{ 
     width:3000px;
     height:300px;
     transition:left 1s ease;
    }
    .lb_body .lb_cont ul{ 
     display:flex;
    }
    .lb_body .lb_cont ul li{ 
     width:600px;
     height:300px;
     list-style:none;
    }
    .lb_body .lb_cont ul li img{ 
     width:100%;
     height:100%;
    }
    .li_box{ 
     position:relative;
     bottom:25px;
    }
    .li_box ul{ 
     display:flex;
     justify-content:center;
    }
    .li_box>ul>li{ 
     list-style:none;
     width:15px;
     height:15px;
     background-color:#fff;
     border-radius:15px;
     margin-right:5px;
     opacity:0.6;
    }

重中之重 JavaScript代码：

简单的实现了轮播 上几张效果图吧！  
目录结构 可自行修改![在这里插入图片描述][20200122182533537.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyaXN0amNqZG5jZw_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyaXN0amNqZG5jZw_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyaXN0amNqZG5jZw_size_16_color_FFFFFF_t_70 2]

这里图片下方的小圆点是自动跟着图片的轮播走的，同时也是可点击的。快来试试吧。哈哈哈，挺好玩的。

[20200122182533537.png]: https://img-blog.csdnimg.cn/20200122182533537.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyaXN0amNqZG5jZw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200122182649116.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyaXN0amNqZG5jZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyaXN0amNqZG5jZw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200122182611677.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyaXN0amNqZG5jZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyaXN0amNqZG5jZw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020012218272544.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyaXN0amNqZG5jZw==,size_16,color_FFFFFF,t_70