js用构造函数写轮播图

html部分

<div id="box">
        <ul id="list">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <ul id="image">
            <li><img src="./img/1.jpg" alt=""></li>
            <li><img src="./img/2.jpg" alt=""></li>
            <li><img src="./img/3.jpg" alt=""></li>
            <li><img src="./img/4.jpg" alt=""></li>
        </ul>
    </div>

css部分

*{margin: 0;padding: 0;}
        #box{
            width: 730px;height: 454px;
            overflow: hidden;
            margin: 50px auto;
            position: relative;
        }
        #list{
            display: flex;
            color: #fff;
            list-style-type: none;
            position: absolute;
            top: 390px;left: 520px;
        }
        #list li{
            width: 40px;height: 40px;
            text-align: center;line-height: 40px;
            margin-right: 5px;
            font-size: 18px;
            background-color: #F9BFCD;
        }
        #list .active{
            background-color: #020200;
        }
        #image{
            display: flex;
            list-style-type: none;
        }

js部分

        var olist=document.getElementById('list');
        var oimage=document.getElementById('image');
        var oli=olist.children;
        var oimg=oimage.children;
        var timer=null;
        var index=0;

        function Lunbo(){
            this.index=index;
        }

        Lunbo.prototype.mySub=function(){
            olist.onmouseover=function(ev){
                clearInterval(timer)
                var ev=ev||even;
                var target=ev.target;
                if(target.nodeName.toLowerCase()==='li'){
                    for(var i=0;i<oli.length;i++){
                        oli[i].index=i;
                    }
                    index=target.index;
                    new Lunbo().myClear();
                    return index;
                }
            }
            olist.onmouseout=function(){
                clearInterval(timer)
                timer=setInterval(lunbo,1000)
            }
        }
        
        Lunbo.prototype.myClear=function(){
            for(var i=0;i<oli.length;i++){
                oli[i].className='';
            }
            oli[this.index].className='active';
            oimage.style.marginLeft=-this.index*730+'px'
        }
    
        function lunbo(){
            for(var i=0;i<oli.length;i++){
                oli[i].className='';
            }
            oli[index].className='active';
            oimage.style.marginLeft=index*-730+'px'

            if(index<oli.length-1){
                index++;
            }else{
                index=0;
            }
        }

        new Lunbo().mySub();
        timer=setInterval(lunbo,1000)