left: 0;
}
img:nth-of-type(2){
left: 84px;
}
img:nth-of-type(3){
left: 168px;
}
img:nth-of-type(4){
left: 252px;
}
img:nth-of-type(5){
left: 336px;
}
</style>
<div class="box">
<img src="http://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg">
<img src="http://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg">
<img src="https://www.easck.com/d/file/200524/20200524212506852.jpg">
<img src="https://www.easck.com/d/file/200524/20200524212506853.jpg">
<img src="https://www.easck.com/d/file/200524/20200524212506854.jpg">
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
//精简之后的方法
var lefts;
var idx;
var imgL;
var imgR;
$("img").each(function(){
$(this).mouseenter(function(e) {
idx = $(this).index();
imgL = "img:lt(" + idx + ")" //获取当前左侧的所有图片，如果直接用 $("img:lt(idx)")，idx会被当做字符串，获取不到对应的值
imgR = "img:gt(" + idx + ")" //获取当前右侧的所有图片
lefts = idx * 35;
//当前图片的变化
$(this).stop(true).animate({"left" : idx * 35}, 1000);
//左侧图片的变化
$(imgL).each(function(){
$(this).stop(true).animate({"left" : ($(this).index()) * 35}, 1000)
})
//右侧图片的变化
$(imgR).each(function(){
$(this).stop(true).animate({"left" : ($(this).index()+7) * 35}, 1000)
})
});
})
$("img").each(function(){
$(this).mouseleave(function(){
$("img").each(function(){
$(this).stop(true).animate({"left" : ($(this).index())*84}, 1000);
})
});
})
</script>
</body>
</html>
鼠标移出效果，就是恢复到最开始的状态，就不在叙述了。
方法可能不是最简单的方法，说的也可能不甚详尽，希望大神多多指教，我也多多学习~~~
ps： 图片不知道怎么加上来，稍后看下再改吧。欢迎各位加入交流学习前端群 466039913
