轮播图（html+css+js）

最新推荐文章于 2024-06-17 15:29:34 发布

十年少i

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量423

点赞数

分类专栏：前端文章标签： javascript css html5

本文链接：https://blog.csdn.net/fristjcjdncg/article/details/104071822

版权

前端知识：实现一个简单的轮播图。
直接上代码：
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;
}

最低0.47元/天解锁文章

十年少i

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
轮播图（html+css+js）

前端知识：实现一个简单的轮播图。直接上代码：html 代码<!DOCTYPE html ><html><head><meta charset="UTF-8"> <title>轮播图</title> <link href="css/lunbo.css" type="text/css" rel="...
复制链接

扫一扫