<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
/*外面的大盒子宽360，高430，有边框*/
.box{
width:360px;
height:430px;
border:1px solid black;
margin:100px;
}
/*上面的盒子宽360，高359，下面还有1px的边框，最开始有一张背景图*/
#boxshang{
width:360px;
height:359px;
border-bottom:1px solid black;
background:url(C:/Users/高萍/Desktop/前端学习/images/01big.jpg) no-repeat center ;
}
/*下面鼠标展示区的排版*/
.boxxia ul{
list-style:none;
}
.boxxia ul li{
float:left;
}
</style>
<!--js部分，当点击下方5中图片中的任意一张时，该图片会变成上面盒子的背景图片-->
<script>
//先写出两个js 效果，找到相同的地方，有几个相同的变量，比较后，封装成函数
/*window.onload=function() { //function后面的括号不要丢
var li05 = document.getElementById("li05");
var boxshang = document.getElementById("boxshang");
li05.onmouseover = function () {
boxshang.style.backgroundImage = "url(C:/Users/高萍/Desktop/前端学习/images/05big.jpg)";
}
var li02 = document.getElementById("li02");
var boxshang = document.getElementById("boxshang");
li02.onmouseover = function () {
boxshang.style.backgroundImage = "url(C:/Users/高萍/Desktop/前端学习/images/02big.jpg)";
}
}*/
window.onload=function(){
var boxshang=document.getElementById("boxshang"); //这一句可以写在函数外面，也可以写在函数里面，但boxshang是不变的，所以写在函数外面更好
function fn(liid,bg){
var liid = document.getElementById(liid); //liid不用加括号，是形参变量
liid.onmouseover = function(){
boxshang.style.backgroundImage = bg; //别把bg也写一句 var bg=document.getElementById("bg"),bg 他没有id
}
}
fn("li01" ,"url(C:/Users/高萍/Desktop/前端学习/images/01big.jpg)"); //调用函数的时候，实参一定加引号！！！
fn("li02", "url(C:/Users/高萍/Desktop/前端学习/images/02big.jpg)");
fn("li03", "url(C:/Users/高萍/Desktop/前端学习/images/03big.jpg)");
fn("li04" ,"url(C:/Users/高萍/Desktop/前端学习/images/04big.jpg)");
fn("li05" ,"url(C:/Users/高萍/Desktop/前端学习/images/05big.jpg)");
} //注意不要丢括号！！！
</script>
</head>
<body>
一个大盒子，大盒子里面有上下两个盒子，大盒子最开始有一张背景图，下面的盒子中排列着5张图片
<div class="box">
<div id="boxshang"></div>
<div class="boxxia">
<ul>
<li id="li01"><img src="C:/Users/高萍/Desktop/前端学习/images/01.jpg" alt=""/></li>
<li id="li02"><img src="C:/Users/高萍/Desktop/前端学习/images/02.jpg" alt=""/></li>
<li id="li03"><img src="C:/Users/高萍/Desktop/前端学习/images/03.jpg" alt=""/></li>
<li id="li04"><img src="C:/Users/高萍/Desktop/前端学习/images/04.jpg" alt=""/></li>
<li id="li05"><img src="C:/Users/高萍/Desktop/前端学习/images/05.jpg" alt=""/></li>
</ul>
</div>
</div>
</body>
</html>
