本案例只供参考思路
效果展示：
代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* #container {
background-color: pink;
} */
* {
margin: 0px;
padding: 0px;
}
ul {
width: 300px;
/* background-color: red; */
margin: 50px auto;
list-style: none;
position: relative;
}
ul li {
/* background-color: pink; */
height: 50px;
line-height: 50px;
width: 50px;
border: 1px solid orangered;
text-align: center;
}
img {
width: 250px;
width: 250px;
display: none;
}
.images {
position: absolute;
top: 0px;
left: 50px;
/* display: none; */
}
</style>
<script src="js/new_file.js"></script>
<script>
$(function() {
// console.log($images);
$("ul>li").mouseover(function() {
//获取当前按钮的索引号
var $index = $(this).index();
console.log($index);
//通过索引号来显示对应的图片
$(".images img").eq($index).show();
//显示当前图片时候，其余兄弟图片隐藏
$(".images img").eq($index).siblings().hide();
})
})
</script>
</head>
<body>
<div id="container">
<ul>
<li>图一</li>
<li>图二</li>
<li>图三</li>
<div class="images">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/4.jpg">
</div>
</ul>
</div>
</body>
</html>