<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ //alert($('#findclose').closest('div').attr('id')); var pic_length = $('#gd li').length; var n = 0; $('#toleft').click(function(){ if (!$('#gd').is(':animated') && n) { $('#gd').animate({left:'+=120px'},500); n--; } }); $('#toright').click(function(){ if (!$('#gd').is(':animated') && pic_length > n+5) { $('#gd').animate({left:'-=120px'},500); n++; } }); }) </script> <style type="text/css"> ul{ list-style:none; margin:0px; padding:0px; text-align:center; } #gd li { width:90px; height:80px; display:block; float:left; margin:9px 15px; } </style> <div style="width:702px;height:100px;background:#ccc;margin:0 auto"> <div style="width:30px;height:30px;background:red;margin:35px 10px;float:left;cursor:pointer;" id="toleft"></div> <div style="width:600px;height:98px;float:left;border:1px solid #777;overflow: hidden;"> <ul style="list-style: none outside none;height:98px;display:block;background:yellow;position:relative;width:9999em;" id="gd"> <li style="background:red"></li> <li style="background:orange"></li> <li style="background:green"></li> <li style="background:navy"></li> <li style="background:blue"></li> <li style="background:purple"></li> <li style="background:pink"></li> <li style="background:gray"></li> </ul> </div> <div style="width:30px;height:30px;background:red;margin:35px 10px;float:left;cursor:pointer;" id="toright"></div> </div>