<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
{
margin:0;
padding: 0;
}
ul{
margin: 0 auto;
width: 350px;
height: 430px;
background: red;
border: 1px solid blue;
overflow: hidden;
}
ul li{
list-style: none;
}
ul .box1{
width: 360px;
height: 360px;
background:green;
}
ul .box2{
width: 350px;
height: 70px;
background: yellow;
}
ul .box2 ul{
/height: 70px;*/
}
ul .box2 ul li{
list-style: none;
width: 70px;
height: 70px;
border: 1px solid #000;
box-sizing: border-box;
display: inline-block;
float: left;
}
</style>
</head>
<body>
<ul>
<li class="box1" id="box1"></li>
<li class="box2">
<ul>
<li class="box3"><img id="gl1" src="images/diannaoxuanqu/1.jpg" alt=""></li>
<li class="box4"><img id="gl2" src="images/diannaoxuanqu/2.jpg" alt=""></li>
<li class="box5"><img id="gl3" src="images/diannaoxuanqu/3.jpg" alt=""></li>
<li class="box6"><img id="gl4" src="images/diannaoxuanqu/4.jpg" alt=""></li>
<li class="box7"><img id="gl5" src="images/diannaoxuanqu/5.jpg" alt=""></li>
</ul>
</li>
</ul>
<script>
var img1=document.getElementById("gl1");
var img2=document.getElementById("gl2");
var img3=document.getElementById("gl3");
var img4=document.getElementById("gl4");
var img5=document.getElementById("gl5");
var box1=document.getElementById("box1");
// img1.onclick = function () {
// box1.src="images/diannaoxuanqu/1big.jpg";
// }
// img2.onclick = function () {
// box1.src="images/diannaoxuanqu/2big.jpg";
// }
// img3.onclick = function () {
// box1.src="images/diannaoxuanqu/3big.jpg";
// };
// img4.onclick = function () {
// box1.src="images/diannaoxuanqu/4big.jpg";
// };
// img5.onclick = function () {
// box1.src="images/diannaoxuanqu/5big.jpg";
// };
img1.onclick = function () {
box1.style.background="url(images/diannaoxuanqu/1big.jpg) 0 0 no-repeat";
};
img2.onclick = function () {
box1.style.background="url(images/diannaoxuanqu/2big.jpg) 0 0 no-repeat";
};
img3.onclick = function () {
box1.style.background="url(images/diannaoxuanqu/3big.jpg) 0 0 no-repeat";
};
img4.onclick = function () {
box1.style.background="url(images/diannaoxuanqu/4big.jpg) 0 0 no-repeat";
};
img5.onclick = function () {
box1.style.background="url(images/diannaoxuanqu/5big.jpg) 0 0 no-repeat";
};
// 注意点：
// 今天做的这个练习最主要是认清楚标签的属性
// 1、做这个的时候要弄清楚是给了谁id属性很重要，就像今天做的练习一样，在没有弄清楚你的id属性是给了背景框，还是给了填充的图片。就会将背景框和填充图片的位置相混淆，以至于将背景的id给了图片，图片的id给了背景，使他们互相找不到，致使做改变的值无法返回到改变后的界面。
//
</script>
</body>
