看上去没有什么错误，见证奇迹~~~奇迹~~迹~~~然而并没有什么奇迹，原因就是 $(“img:lt( idx )“) 这种写法，里面的idx已经不是变量了，所以无法获取当前的 idx 值，我们可以在外面定义一个变量，同时用 + 连接 lt 和变量 idx，再把变量引入进去即可。
因此更改后如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <style type="text/css"> div{ width: 420px; height: 186px; border: 2px solid #ccc; overflow: hidden; position: relative; margin: 100px auto; } img{ border: none; display: block; position: absolute; top: 0; } img:nth-of-type(1){ 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> <img src="https://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg"> <img src="https://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg"> <img src="https://src.house.sina.com.cn/imp/imp/deal/5c/fa/e/afb00d1b581922fa567f9d65bfd_p1_mk1.jpg"> <img src="https://www.wallcoo.com/nature/wild_field_01/wallpapers/1440x900/3787717_Wild_field_v1224236762.jpg"> <img src="https://pic31.nipic.com/20130628/10700765_164502542117_2.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; $("img").each(function(){ $(this).mouseenter(function(e) { idx = $(this).index(); imgL = "img:lt(" + idx + ")" lefts = idx * 35; //当前图片的变化 $(this).stop(true).animate({"left" : idx * 35}, 1000); $(imgL).each(function(){ $(this).stop(true).animate({"left" : ($(this).index()) * 35}, 1000) }) }); })
这样奇迹就出现了~~ 同样的道理，右侧也是同样的方法。
最终代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <style type="text/css"> div{ width: 420px; height: 186px; border: 2px solid #ccc; overflow: hidden; position: relative; margin: 100px auto; } img{ width:280px; height:186px; border: none; display: block; position: absolute; top: 0; } img:nth-of-type(1){ 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> <img src="https://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg"> <img src="https://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg"> <img src="https://src.house.sina.com.cn/imp/imp/deal/5c/fa/e/afb00d1b581922fa567f9d65bfd_p1_mk1.jpg"> <img src="https://www.wallcoo.com/nature/wild_field_01/wallpapers/1440x900/3787717_Wild_field_v1224236762.jpg"> <img src="https://pic31.nipic.com/20130628/10700765_164502542117_2.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