效果图:
点击小图,上方大图会跟着变。
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>萌宠相册001</title>
<link rel="stylesheet" type="text/css" href="css/cute.css" />
<link rel="stylesheet" type="text/css" href="css/index1.css" />
</head>
<body>
<div class="contatiner">
<div class="contatiner-big">
<img src="img/bigg/1.jpg" alt="cat1" id="container_big_image">
</div>
<ul class="container_small" id="container_small">
<li><a href="img/bigg/1.jpg" title="cat1">
<img src="img/smalll/1.jpg" alt="cat1"></a>
</li>
<li><a href="img/bigg/2.jpg" title="cat2">
<img src="img/smalll/2.jpg" alt="cat2"></a>
</li>
<li><a href="img/bigg/3.jpg" title="cat3">
<img src="img/smalll/3.jpg" alt="cat3"></a>
</li>
<li><a href="img/bigg/4.jpg" title="cat4">
<img src="img/smalll/4.jpg" alt="cat4"></a>
</li>
<li><a href="img/bigg/5.jpg" title="cat5">
<img src="img/smalll/5.jpg" alt="cat5"></a>
</li>
</ul>
</div>
</body>
<script src="js/index1.js" type="text/javascript" charset="utf-8"></script>
</html>
css代码
body{
background: #E0E0E0;
}
.contatiner{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width: 960px;
height: 730px;
margin: 50px auto;
background: #FFF;
overflow: hidden;
}
.contatiner-big{
width: 100%;
height: 600px;
}
#container_big_image{
width: 100%;
height: 600px;
}
.container_small{
width: 100%;
height: 120px;
margin: 10px 0px 0px 0px;
padding-left: 0px;
list-style: none;
}
#container_small>li>a>img{
width: 100%;
height: 100%;
}
li{
width: 20%;
height: 120px;
float: left;
}
js代码:
// 获取所有小图的a标签并返回一个a标签列表
let container_small_a_list=document.getElementById("container_small").getElementsByTagName("a");
// 循环遍历所有小图a标签并注册点击事件
for(let i=0;i<container_small_a_list.length;i++){
container_small_a_list[i].onclick=function(){
document.getElementById("container_big_image").src=this.href;
// 将小图的a标签的alt属性赋值给大图的alt属性
document.getElementById("container_big_image").alt = this.title;
//防止跳转页面
return false;
}
}
笔记(注意点):
1.将小图的a标签的href属性赋值给大图的src属性
document.getElementById("container_big_image").src=this.href;
2.防止页面跳转
return false;