HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>源计划</title>
<link rel="stylesheet" href="css/yjh.css"/>
</head>
<body>
<div class="box1">
<div class="btn">
<a href="#img1">1</a>
<a href="#img2">2</a>
<a href="#img3">3</a>
<a href="#img4">4</a>
<a href="#img5">5</a>
<a href="#img6">6</a>
<a href="#img7">7</a>
<a href="#img8">8</a>
<a href="#img9">9</a>
<a href="#img10">10</a>
<a href="#img11">11</a>
<a href="#img12">12</a>
<a href="#img13">13</a>
<a href="#img14">14</a>
<a href="#img15">15</a>
<a href="#img16">16</a>
</div>
<div class="list">
<img src="img/1.jpg" id="img1"/>
<img src="img/2.jpg" id="img2"/>
<img src="img/3.jpg" id="img3"/>
<img src="img/4.jpg" id="img4"/>
<img src="img/5.jpg" id="img5"/>
<img src="img/6.jpg" id="img6"/>
<img src="img/7.jpg" id="img7"/>
<img src="img/8.jpg" id="img8"/>
<img src="img/9.jpg" id="img9"/>
<img src="img/10.jpg" id="img10"/>
<img src="img/11.jpg" id="img11"/>
<img src="img/12.jpg" id="img12"/>
<img src="img/13.jpg" id="img13"/>
<img src="img/14.jpg" id="img14"/>
<img src="img/15.jpg" id="img15"/>
<img src="img/16.jpg" id="img16"/>
</div>
</div>
</body>
</html>
CSS
*{margin: 0;padding: 0;}
img {display: block;}
.box1 {width: 600px;height: 337px;border: 1px #000000 solid;margin: 50px auto;position: relative;}
.btn {position:absolute;right: 5px;bottom: 10px;}
.btn a {float: left;width: 30px;height: 30px;background: rgb(0,0,0,.5);text-align: center;
line-height: 30px;color: #ffffff;text-decoration: none;margin-right: 5px;}
.btn a:hover {background: rgb(0,0,0,1);}
.list {width: 600px;height: 337px;overflow: hidden;}
IMG 可以存放图片
完成后点击数字跳到对应图片