banner轮播图

最新推荐文章于 2023-09-20 16:35:19 发布

alone0116

最新推荐文章于 2023-09-20 16:35:19 发布

阅读量326

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/alone0116/article/details/52439504

版权

html样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="banner">
<div class="img_box">
<img class="select" src="img/banner1.jpg" alt="" />
<img src="img/banner2.jpg" alt="" />

图片来源自己设置
<img src="img/banner3.jpg" alt="" />
<img src="img/banner4.jpg" alt="" />
</div>
<ul class="num">
<li class="select"></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="javascript:;" class="banner_left"></a>
<a href="javascript:;" class="banner_right"></a>
</div>
</body>
<script src="js/js.js"></script>
</html>

***********************css样式**********************************************************************************

*{
margin:0;
padding:0;
}
ul{list-style: none;}
#banner{
width: 1000px;
height: 400px;
border:1px solid #ccc;
margin: 50px auto;
position: relative;
}
.img_box{
width:1000px;
height:400px;
}
.img_box img{
width:100%;
height:100%;
display: none;
}
.img_box img.select{
display: block;
}
.num{
position: absolute;
width: 160px;
height:30px;
right:20px;
bottom: 20px;
}
.num li{
float:left;
width:20px;
height:20px;
margin-right:20px;
background: #ccc;
border-radius: 50%;
}
.num li.select{
background: orange;
}

a{
width: 30px;
height:50px;
background:url(../img/pre.png);
position:absolute;
top:50%;
margin-top:-35px;
opacity: 0.4;
}
.banner_right{
right: 0;
background-position:-50px 0;
}
a.select{
opacity: 1;
}