<style type="text/css"> *{ margin: 0; padding: 0; } #outer{ 1000px; height: 450px; margin: 50px auto 0; overflow: hidden; } #outer div{ 50px; height: 450px; float: left; overflow: hidden; } #outer img{ 800px; height: 450px; } #outer #show{ 800px; } </style>
<div id="outer"> <div id="show"><img src="img/1.jpg" alt="" /></div> <div><img src="img/10.jpg" alt="" /></div> <div><img src="img/11.jpg" alt="" /></div> <div><img src="img/12.jpg" alt="" /></div> <div><img src="img/2.jpg" alt="" /></div> </div>
<script src="js/jquery-2.2.1.min.js"></script> <script> $("#outer>div").click(function(){ $(this).stop().animate({"width":"800"},500); $(this).siblings().stop().animate({"width":"50"},500); }) </script>