<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{padding: 0;margin: 0;} a{text-decoration: none;} ul{list-style: none;} div{width: 500px; height: 375px; border: 1px solid #222; position: relative; margin: 50px auto; } div ul.imgs{width: 500px; height: 375px; overflow: hidden;} #btn{position: absolute; bottom: 10px; right: 10px;} #btn li{float: left; margin-right: 4px; width: 30px; height: 30px;} #btn li a{display: block; width: 30px; height: 30px; background: black; opacity: .6; line-height: 30px; color: white; text-align: center;} </style> </head> <body> <div> <ul id="btn"> <li><a href="#img01">1</a></li> <li><a href="#img02">2</a></li> <li><a href="#img03">3</a></li> <li><a href="#img04">4</a></li> </ul> <ul class="imgs"> <li id="img01"><img src="./img/img06.jpg" alt=""></li> <li id="img02"><img src="./img/img05.jpg" alt=""></li> <li id="img03"><img src="./img/img04.jpg" alt=""></li> <li id="img04"><img src="./img/img07.jpg" alt=""></li> </ul> </div> </body> </html>