<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 1300px;
}
#box {
width: 1200px;
height: 400px;
border: 2px solid red;
margin: 100px auto;
}
#box li {
width: 240px;
height: 400px;
float: left;
}
li:nth-child(1){
background: url("images/1.jpg");
}
li:nth-child(2){
background: url("images/2.jpg");
}
li:nth-child(3){
background: url("images/3.jpg");
}
li:nth-child(4){
background: url("images/4.jpg");
}
li:nth-child(5){
background: url("images/5.jpg");
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jQuery-accordion.js"></script>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
<script>
$("#box").accordion(100);
</script>
JS部分
$.fn.accordion=function (width) {
var $li=this.find('li');
var allWidth=this.width();
var maxWidth=allWidth-($li.length-1)*width;
var vagWidth=allWidth/$li.length;
$li.mouseenter(function () {
$(this).stop().animate({width:maxWidth}).siblings().stop().animate({width:width});
})
$li.mouseleave(function () {
$li.stop().animate({width:vagWidth})
})
}