-
.banner{position:relative;margin:100px auto;width:958px;height:400px;}
.banner ul{margin:0;padding:0;list-style:none;}
.hot{position:absolute;top:0;left:0;}
.hot li{float:left;}
/* 小圆点样式 */
.dot{position:absolute;bottom:10px;width:100%;text-align:center;font-size:0;}
.dot li{display:block;display:inline-block;margin:0 5px;width:15px;height:15px;border-radius:100%;background:rgba(145,144,144,.5);cursor:pointer;}
.dot .on{background-color:#fff;}
/* 左右翻页箭头样式 */
.arrow{display:none;}
.arrow span{display:block;width:50px;height:100px;background:rgba(0,0,0,.6);color:#fff;text-align:center;font-size:40px;line-height:100px;cursor:pointer;}
.arrow .prev{position:absolute;top:50%;left:0;margin-top:-50px;}
.arrow .next{position:absolute;top:50%;right:0;margin-top:-50px;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/new.css" />
</head>
<body>
<div class="banner">
<ul class="hot">
<!--轮播图片-->
<li><a href="#"><img src="img/1.jpg"></a></li>
<li><a href="#"><img src="img/2.jpg"></a></li>
<li><a href="#"><img src="img/3.jpg"></a></li>
<li><a href="#"><img src="img/4.jpg"></a></li>
<li><a href="#"><img src="img/5.jpg"></a></li>
</ul>
<!--小圆点-->
<ul class="dot">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 左右翻页箭头-->
<div class="arrow"><span class="prev"><</span><span class="next">></span></div>
</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/case.js"></script>
</body>
</html>
