简易版的图片轮播效果插件形式

写的不是很完善只实现了效果先码上我会慢慢整合改进
<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>图片的轮播效果 需要改进</title>
    <style>
        body,ul,ol{margin:0;padding:0;}
        li{ list-style:none;}
        img{ border:none; vertical-align:top; }
        #box{width:470px;height:150px; position:relative; margin:30px auto; overflow:hidden;}
        ul{ width:470px; position:absolute;left:0; top:0; z-index:1;}
        ul li{width:470px;}
        ol{z-index:2; width:120px; position:absolute;right:10px; bottom:10px;}
        ol li{ width:20px;height:20px; float:left;margin:0 2px; display:inline; background:#fff; color:#f60; line-height:20px; text-align:center;}
        ol .active{ background:#f60; color:#fff;}
        body{ width: 100%; height: auto; overflow: hidden;}
    </style>
    <script type="text/javascript" src="jquery-1.10.1.min.js"></script>
    <script>

        ;(function($,window,document,undefined){
            /**
             * tab选项卡的切换效果
             * @param ele
             * @param opt
             * @constructor
             */
            function Slider(ele,opt){
                this.wrapContent =ele;//父级容器
                this.iconTag = this.wrapContent.find('ol').find('li');
                this.picShow = this.wrapContent.find('ul').find('li');
                this.now = 0;//图片的起点数
                this.now2 = 0;//按钮的起点数
                this.timer = null;
                this.oneHeight = this.picShow.height();//获取一个图片的高度
            }
            Slider.prototype = {
                'init':function(){
                    var _this = this;
                    this.iconTag.on('mouseover',function(){//li 添加mouseover的事件
                        var index = $(this).index();
                        _this.now = index ;
                        _this.now2 = index;
                        _this.change();
                    });
                    this.autoPlay();
                    this.stop();
                },
                'autoPlay':function(){
                    var _this = this;
                    this.timer = setInterval(function(){
                        _this.play();
                    },2000);

                },
                'play':function(){
                    if(this.now==(this.iconTag.size()-1)){
                        this.now = 0;
                        this.picShow.eq(0).css({'top':this.iconTag.size()*this.oneHeight,'position':'relative'});
                    }else{
                        this.now++;
                    }
                    this.now2++;
                    this.change();
                },
                'change':function(){
                
                    var _this = this;
                    this.iconTag.eq(this.now).addClass('active').siblings().removeClass('active');
                    this.picShow.parent().stop().animate({'top':-this.now2*this.oneHeight},300,function(){
                        if(_this.now2==_this.iconTag.size()){
                            _this.picShow.eq(0).css({'position':'static'});
                            _this.picShow.parent().css({'top':0});
                            _this.now2 = 0;
                        }
                    });
                    
                },
                'stop':function(){
                    var _this = this;
                    this.wrapContent.hover(function(){
                        clearInterval(_this.timer);
                    },function(){
                        _this.autoPlay();
                    });
                }
            }

            $.fn.slider = function(options){
                var oSlider = new Slider(this,options);
                return oSlider.init();
            }

        })(jQuery,window,document);
        
        $(function(){
            $('#box').slider();
        });
    </script>
</head>
<body>
<div id="box">
    <ul>
        <li><img src="images/1.jpg" alt=""/></li>
        <li><img src="images/2.jpg" alt=""/></li>
        <li><img src="images/3.jpg" alt=""/></li>
        <li><img src="images/4.jpg" alt=""/></li>
        <li><img src="images/5.jpg" alt=""/></li>
    </ul>
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</div>
</body>
</html>
新手写的希望大神指教下
简易版的图片轮播效果 插件形式

简易版的图片轮播效果插件形式
