前端小练习-萌宠相册

效果图：

点击小图，上方大图会跟着变。

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；

前端小练习-萌宠相册

猜你喜欢