学了这么久的JQuery，是时候做点小小项目了
（该案例需要十二张美女图片，自己去找··················嘿嘿~~~~~）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<title>Nearth</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
body{
background-image: url(0.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
div{
margin-left:10px;
}
.beauty{
width:400px;
height: 240px;
overflow: hidden;
text-align: center;
}
#left,#center,#right{
float: left;
}
#left li,#right li{
background-color: #FFB6C1;
}
#left li a,#right li a{
display:block;
width:100px;
height:40px;
border-bottom: 1px solid aqua;
line-height: 40px;
text-align: center;
color: black;
}
#left li a:hover,#right li a:hover{
background-color: brown;
}
#center{
border-left: 3px solid orangered;
border-right: 3px solid orangered;
border-radius: 2px;
}
</style>
<script>
$(function(){
$("#left>li").mouseover(function(){
var index=$(this).index();
$("#center>li:eq("+index+")").siblings("li").hide();
$("#center>li:eq("+index+")").show();
});
$("#right>li").mouseover(function(){
var index=$(this).index()+6;
$("#center>li:eq("+index+")").siblings("li").hide();
$("#center>li:eq("+index+")").show();
});
});
</script>
</head>
<body>
<h1 align="center">精品美女展示案列</h1>
<hr >
<div id="beauty">
<ul id="left">
<li><a href="#">西施1号</a></li>
<li><a href="#">西施1号</a></li>
<li><a href="#">西施1号</a></li>
<li><a href="#">西施1号</a></li>
<li><a href="#">西施1号</a></li>
<li><a href="#">西施1号</a></li>
</ul>
<ul id="center">
<li><a href="#"><img src="1.jpg"width="200" height="240" ></a></li>
<li><a href="#"><img src="2.jpg" width="200" height="240"></a></li>
<li><a href="#"><img src="3.jpg"width="200" height="240" ></a></li>
<li><a href="#"><img src="4.jpg" width="200" height="240"></a></li>
<li><a href="#"><img src="5.jpg" width="200" height="240"></a></li>
<li><a href="#"><img src="6.jpg"width="200" height="240" ></a></li>
<li><a href="#"><img src="7.jpg" width="200" height="240"></a></li>
<li><a href="#"><img src="8.jpg"width="200" height="240" ></a></li>
<li><a href="#"><img src="9.jpg" width="200" height="240"></a></li>
<li><a href="#"><img src="10.jpg"width="200" height="240" ></a></li>
<li><a href="#"><img src="11.jpg" width="200" height="240"></a></li>
<li><a href="#"><img src="12.jpg"width="200" height="240" ></a></li>
</ul>
<ul id="right">
<li><a href="#">貂蝉1号</a></li>
<li><a href="#">貂蝉1号</a></li>
<li><a href="#">貂蝉1号</a></li>
<li><a href="#">貂蝉1号</a></li>
<li><a href="#">貂蝉1号</a></li>
<li><a href="#">貂蝉1号</a></li>
</ul>
</div>
</body>
</html>
