锚点实现图片切换
程序员文章站
2024-01-23 12:12:22
...
使用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>
效果如下：
上一篇： Ubuntu16.04安装PCL