<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ 790px; height: 340px; margin: 80px auto; position: relative;/*一个相对，其他都是绝对固定*/ } .img li{ position: absolute; list-style: none; top: 0; left: 0; } .num{ position: absolute; bottom: 18px; left: 270px; background-color: white; list-style: none; } .num li{ display: inline-block; 18px; height: 18px; background-color: red; border-radius: 50%; text-align: center; line-height: 18px; margin-left: 4px; } .btn{ position: absolute; top: 50%; /*left: 0;*/ 30px; height: 60px; background-color: lightgrey; color: white; text-align: center; line-height: 60px; font-size: 30px; opacity: 0.7; margin-top: -30px; display: none; } .left{ left: 0px; } .right{ right: 0px; } .outer:hover .btn{/*悬浮的时候显示左右*/ display: inline-block; } </style> </head> <body> <div class="outer"> <ul class="img"> <li><a href=""><img src="123.jpg" alt=""></a></li> <li><a href=""><img src="123.jpg" alt=""></a></li> <li><a href=""><img src="123.jpg" alt=""></a></li> <li><a href=""><img src="123.jpg" alt=""></a></li> <li><a href=""><img src="123.jpg" alt=""></a></li> <li><a href=""><img src="123.jpg" alt=""></a></li> </ul> <ul class="num"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <div class="left btn"> < </div> <div class="right btn"> > </div> </div> <script src="jquery-3.3.1.min.js"></script><!--不加此句$不识别--> <script> </script> </body> </html>