<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> *{ margin: 0; padding: 0; /* background-color: pink; */ } .container{ overflow: hidden; margin: 50px auto; width: 340px; height: 200px; /* background-color: blue; */ } ul{ list-style: none; } ul li{ float: left; width: 70px; height: 200px; } ul li .active{ width:200px; height: 200px; } </style> <body> <div class="container"> <ul> <li class="active" ><img src="donghuaImg/11.jpg" /></li> <li><img src="donghuaImg/22.jpg" /></li> <li><img src="donghuaImg/33.jpg" /></li> </ul> </div> </body> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> <script> $(function(){ $('.container ul li').mouseover(function(){ //清空队列，防止无限改变宽， 放上的宽为200 其他兄弟li宽为70 $(this).stop(true).animate({200},500).siblings().animate({70},500) }) }) </script> </html>