<!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>
