<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
div{width: 600px;margin: 50px auto;text-align: center;}
#pic{width: 400px;}
ul{margin-top: 15px;margin-left: 45px;}
ul,li{list-style-type: none;}
ul li{float: left;width: 120px;height: 80px;margin-right: 10px;border: 1px solid gray;padding: 3px;}
ul li img{width: 120px;height: 80px;}
ul li:hover{cursor: pointer;}
ul li.on{border-width: 2px;border-color: red;}
</style>
<script type="text/javascript" src="js/1.js"></script>
</head>
<body>
<div>
<img src="images/l1.jpg" alt="" id="pic">
<ul>
<li class=""><img src="images/l1.jpg" alt=""></li>
<li><img src="images/l2.jpg" alt=""></li>
<li ><img src="images/l3.jpg" alt=""></li>
<li><img src="images/l4.jpg" alt=""></li>
</ul>
</div>
<script type="text/javascript">
$().getTag('li').hover(function(){
//进入
$(this).addClass('on');
var s=$().getTag('img',this).attr('src');
$().getId('#pic').attr('src',s);
;
},function(){
//离开
$(this).removeClass('on');
});
</script>
</body>
</html>