前端小练习
效果图：
点击小图，上方大图会跟着变。
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；
前端小练习
效果图：
点击小图，上方大图会跟着变。
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；