jquery之效果

点击上下按钮进行图片轮播的效果

<script type="text/javascript">
    $(document).ready(function(){
        var size = $("#con ul li").length;
        var index = 0;
        $("#con ul li").not(":first").hide();
        $("#prev").click(function(){
            if(index == 0){
                index = size - 1;
            }else{
                index = index - 1;
            }
            $("#con ul li").hide().eq(index).show();
        });
        $("#next").click(function(){
            if(index == size - 1){
                index = 0;
            }else{
                index = index + 1;
            }
            $("#con ul li").hide().eq(index).show();
        });
    });
</script>

<style type="text/css">
*{ margin:0; padding:0;}
#con img{ width:200px; height:150px;}
</style>

<div style=" 200px; height:150px; overflow:hidden;" id="con">
    <ul>
    <li><img src="images/pic.jpg" alt="1" title="1" /></li>
    <li><img src="images/pic1.jpg" alt="2" title="2" /></li>
    <li><img src="images/pic2.jpg" alt="3" title="3" /></li>
    </ul>
</div>
<input name="" type="button" value="prev" id="prev"><input name="" type="button" value="next" id="next">