Create simple image slider using jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var speed = 1000;    // sliding speed
var show  = 5;
var img_width = 125;    // Adjust the width here if you change the width of li......



jQuery(document).ready(function(){
    var count = 1;
    var size = jQuery("#slideshow ul>li").size();
    var liwidth     = img_width;
    /*var liwidth      = jQuery("#slideshow ul>li").width();
    var limarginL = parseInt(jQuery("#slideshow ul>li").css("marginLeft"));
    var limarginR = parseInt(jQuery("#slideshow ul>li").css("marginRight"));
    liwidth = liwidth + limarginL + limarginR;*/
    var ul      = jQuery("#slideshow ul");
    var width = size*liwidth;
    var margin = -41;
   
    ul.css({width : width, marginLeft : margin});
    jQuery("#slideshow ul").parent().css("width", show * liwidth);
    if(show >= size){
            jQuery("#slideshow a.previous").addClass("disable");
            jQuery("#slideshow a.next").addClass("disable");
    }
    jQuery("#slideshow a.previous").click(function(){
        if(count < size-show){
            ul.animate({marginLeft : margin -= liwidth},speed);   
            count++;
        }
    });
    jQuery("#slideshow a.next").click(function(){
        if(count > 1){
            ul.animate({marginLeft : margin += liwidth},speed);
            count--;
        }
    });
});

</script>
<style type="text/css">

#slideshow { position:absolute; background-color:#CCC; width:900px;}
#slideshow .disable{ display:none;}
.slideshow-box {
    margin: 0 auto;
    overflow: hidden;
    padding-top: 2px;
    position: relative;
    width: 790px;
}
#slideshow li{
    float: left;
    margin:0 2px;
    text-align: center;
    width: 121px;
    height: 100px;
    background-color:#FFFFFF;
}
#slideshow ul{
    overflow:hidden;
    height: 100px;
    width: 800px;
}
#slideshow a.previous{
    float:left;
    top:24px;
    position:relative;
}
#slideshow a.next{
    float:right;
    bottom:36px;
    position:relative;
}
</style>

<div id="slideshow" class="slideshow">
    <a href="#" class="previous">Previous</a>
    <div class="slideshow-box">
        <ul>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </div>
    <a href="#" class="next">Next</a>
</div>