jquery制作向上滚动图片幻灯片

效果图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
*{margin:0;padding:0}
ul,li{list-style-type:none;}
img{border:0;}
.pic-show{360px;height:190px;overflow:hidden;position:relative;}
.ui-pic{position:absolute;}
.ui-pic li{height:190px;overflow:hidden;}
.pic-show .ui-btn{position:absolute;right:2px;bottom:2px;}
.pic-show .ui-btn li{float:left;15px;height:15px;margin-right:3px;border:1px solid #eee;background-color:#ffffff;line-height:15px;font-size:12px;text-align:center;}
.pic-show .ui-btn li.on{background-color:#ee6921;color: #ffffff}
</style>
<script type="text/javascript" src="js/jquery-1.5.min.js" language="javascript"></script>
<script type="text/javascript">
    $(function () {
        var ui_pic = $(".ui-pic");
        var ui_btn = $(".ui-btn");
        var li_btn = ui_btn.find("li");
        var li_pic = $(".ui-pic").find("li");
        var h = ui_pic.find("li").eq(0).height();
        var n = 1;
        var timer;
        li_btn.eq(0).addClass("on");
        li_pic.slice(0, 1).clone().appendTo(ui_pic);
        startGo();
        li_btn.mouseover(function () {
            var index = li_btn.index(this);
            go(index);
            n = index;
        });
        li_btn.hover(stopGo, startGo);

        function startGo() {
            timer = setInterval(function () {
                if (n >= 6) {
                    n = 0;
                }

                go(n);
                n++;
            }, 2000);
        }
        function stopGo() {
            clearInterval(timer);
        }
    });
</script>
</head>
<body>
<div class="pic-show">
        <ul class="ui-pic">
   <li><a href="" title="" target="new"><img src="images/01.jpg" /></a></li>
   <li><a href="" title="" target="new"><img src="images/02.jpg" /></a></li>
   <li><a href="" title="" target="new"><img src="images/03.jpg" /></a></li>
   <li><a href="" title="" target="new"><img src="images/04.jpg" /></a></li>
   <li><a href="" title="" target="new"><img src="images/05.jpg" /></a></li>
         </ul>
   <ul class='ui-btn'>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   </ul>

   </div>
</body>
</html>