jquery實現(xiàn)的圖片點擊滾動效果

字號:


    代碼如下:
    <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>
    <div id="toleft"></div>
    <div>
    <ul id="gd">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    </div>
    <div id="toright"></div>
    </div>