Jquery implementation of the image click scroll effect

 
<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>