1.效果图
2.代码 demo (以5张图为例,可以自由计算缩减或者添加张数)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul {
list-style: none
}
* {
margin: 0;
padding: 0;
}
div {
width: 1150px;
height: 400px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
}
div li {
width: 240px;
height: 400px;
float: left;
}
div ul {
width: 1300px;
}
</style>
<script src="jquery-1.12.2.js"></script>
<script>
$(function () {
$("#box>ul>li").mouseover(function () {
//当前的li的所有的兄弟元素li的宽度设置一下
$(this).siblings("li").css("width","100px");
$(this).css("width","800px");
});
$("#box>ul>li").mouseout(function () {
$("#box>ul>li").css("width","240px");
});
});
</script>
</head>
<body>
<div id="box">
<ul>
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li>
<li><img src="images/4.jpg"/></li>
<li><img src="images/5.jpg"/></li>
</ul>
</div>
</body>
</html>
3.jQuery.js 下载地址 https://jquery.com/download/