使用html+css 生成相册，通过点击右侧小图片，实现大图片切换。 代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box{ width: 530px; height:410px ; border: 1px solid rgb(102,102,102); margin: 0 auto; background-color: rgb(102,102,102); } .box_one{ width: 530px; height: 40px; line-height: 63px0; text-align: center; background-color: rgb(102,102,102); color: rgb(201,236,238); font-size: 18px; padding-top: 23px; } .box_two{ width: 400px; height: 299px; margin-left: 26px; border: 1px solid white; overflow: hidden; float: left; } .box_two img{ width: 400px; height: 299px; } .box_three{ width: 102px; height: 300px; float: left; overflow: scroll; } .box_three img{ width: 70px; height: 49px; border: 1px solid white; } </style> </head> <body> <div class="box"> <div class="box_one"> 电子相册 </div> <div class="box_two"> <img src="../images/mn1.jpg" alt="" id="pic1"> <img src="../images/mn2.jpg" alt="" id="pic2"> <img src="../images/mn3.jpg" alt="" id="pic3"> <img src="../images/mn4.jpg" alt="" id="pic4"> <img src="../images/mn5.jpg" alt="" id="pic5"> <img src="../images/mn6.jpg" alt="" id="pic6"> <img src="../images/mn7.jpg" alt="" id="pic7"> <img src="../images/mn8.jpg" alt="" id="pic8"> </div> <div class="box_three"> <a href="#pic1"><img src="../images/c1.jpg" alt="" id=""></a> <a href="#pic2"><img src="../images/c2.jpg" alt="" id=""></a> <a href="#pic3"> <img src="../images/c3.jpg" alt="" id=""></a> <a href="#pic4"><img src="../images/c4.jpg" alt="" id=""></a> <a href="#pic5"><img src="../images/c5.jpg" alt="" id=""></a> <a href="#pic6"><img src="../images/c6.jpg" alt="" id=""></a> <a href="#pic7"><img src="../images/c7.jpg" alt="" id=""></a> <a href="#pic8"><img src="../images/c8.jpg" alt="" id=""></a> </div> </div> </body> </html>效果如下：
