实现效果如图：
代码实现
<body>
<div class="box">
<h3>电子相册</h3>
<div class="big">
<img src="img/img2/mn1.jpg" alt="" id="a">
<img src="img/img2/mn2.jpg" alt="" id="b">
<img src="img/img2/mn3.jpg" alt="" id="c">
<img src="img/img2/mn4.jpg" alt="" id="d">
<img src="img/img2/mn5.jpg" alt="" id="e">
<img src="img/img2/mn6.jpg" alt="" id="f">
<img src="img/img2/mn7.jpg" alt="" id="g">
<img src="img/img2/mn8.jpg" alt="" id="h">
</div>
<div class="small">
<a href="#a"><img src="img/img1/c1.jpg"></a>
<a href="#b"><img src="img/img1/c2.jpg"></a>
<a href="#c"><img src="img/img1/c3.jpg"></a>
<a href="#d"><img src="img/img1/c4.jpg"></a>
<a href="#e"><img src="img/img1/c5.jpg"></a>
<a href="#f"><img src="img/img1/c6.jpg"></a>
<a href="#g"><img src="img/img1/c7.jpg"></a>
<a href="#h"><img src="img/img1/c8.jpg"></a>
</div>
</div>
</body>
<style type="text/css">
.box{
width: 525px;
height: 403px;
color: #fff;
text-align: center;
background: #666666;
border: 2px solid #ccc;
}
.big,.big img{
width: 400px;
height:300px;
}
.big{
float: left;
border:1px solid #fff;
margin-left: 25px;
overflow: hidden;
}
.small{
float: left;
height: 300px;
overflow-y: scroll;
}
.small a{
display: block;
}
</style>