[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UzijXwIY-1580741042605)(C:%5CUsers%5C%E5%BC%A0%E5%87%AF%5CDesktop%5Cswitch.gif)]
想上传动图的，奈何CSDN只能上传5M大小的动图。本地地址URL外链图片也不行，无奈，功能大家复制源码带本地看吧！
代码如下
<!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>图片图集</title>
<style>
*{
margin: 0;
padding: 0;
}
.star-atlas{
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
width: 485px;
height: 615px;
text-align: center;
margin: 30px auto;
border: 1px solid #b0b0b0;
}
.star-atlas p{
width: 100%;
height: 30px;
line-height: 30px;
font-weight: bold;
text-shadow: 1px 1px 1px #FF0000;
}
.star-atlas .big-img{
width: 99%;
height: 500px;
}
.star-atlas .small-img{
width: 100%;
height: 80px;
}
.star-atlas .small-img a{
display: block;
float: left;
width: 80px;
height: 80px;
margin-left: 20px;
}
.star-atlas .small-img a:first-child{
margin-left: 2px;
}
.star-atlas .small-img img:first-child{
margin-left: 2px;
}
.star-atlas .small-img img{
width: 80px;
height: 80px;
margin-left: 20px;
float: left;
cursor: pointer;
}
</style>
</head>
<body>
<div class="star-atlas">
<p class="name">邓紫棋</p>
<img src="img/邓紫棋.jpg" alt="" title="邓紫棋" class="big-img">
<div class="small-img">
<!-- <a href="img/邓紫棋.jpg"" title="邓紫棋"> -->
<img src="img/邓紫棋.jpg" alt="" title="邓紫棋">
<!-- </a> -->
<!-- <a href="img/刘亦菲.jpg" title="刘亦菲"> -->
<img src="img/刘亦菲.jpg" alt="" title="刘亦菲">
<!-- </a> -->
<!-- <a href="img/唐嫣.jpg" title="唐嫣"> -->
<img src="img/唐嫣.jpg" alt="" title="唐嫣">
<!-- </a> -->
<!-- <a href="img/杨紫.jpg" title="杨紫"> -->
<img src="img/杨紫.jpg" alt="" title="杨紫">
<!-- </a> -->
<!-- <a href="img/赵丽颖.jpg" title="赵丽颖"> -->
<img src="img/赵丽颖.jpg" alt="" title="赵丽颖">
<!-- </a> -->
</div>
</div>
<script>
window.onload = function () {
var name = document.getElementsByClassName('name')[0]; //获取名字需要修改
var bigPic = document.getElementsByClassName('big-img')[0]; //获取大图
var eleA = document.querySelectorAll('.small-img img');
for(var i = 0;i < eleA.length;i++){
eleA[i].onmouseover = function() {
name.innerText = this.title;
bigPic.src = this.src;
return false;
}
}
}
</script>
</body>
</html>
四张图片如下
