为什么我写的轮播图，轮播的速度会越来越慢，电脑内存占用逐渐增长，最后页面崩溃提示内存不足

Question

HTML和CSS代码如下

       <!--轮播图-->
        <div id="Banner">
            <div id="btn-left"> < </div>
            <div id="btn-right"> > </div>
            <div class="list">
                <img src="./img/1.jpg" alt="轮播图" id="img">
            </div>
            <ol id="circle">
                <li class="on"></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>

#Banner{
    position: relative;
    width: 100%;
    height: 600px;
}
#btn-left,
#btn-right{
    position: absolute;
    top: 50%;
    width: 30px;
    height: 60px;
    background: rgba(0,0,0,.6);
    line-height: 60px;
    text-align: center;
    color: #fff;
    font-size: 25px;
    cursor:pointer;
}
#btn-right{
    right: 0;
}
.list{
    width: 100%;
    height: 100%;
}
.list #img{
    width: 100%;
    height: 100%;
}

#circle{
    position: absolute;
    bottom: 10px;
    left: 50%;
    list-style: none;
    width: 160px;
    margin-left: -80px ;
}
#circle li{
    float: left;
    width: 25px;
    height: 25px;
    background-color: #fff;
    margin: 0 5px;
    border-radius: 50%;
    cursor:pointer;
}
#circle .on{
    background-color: orange;
}

JS代码如下

window.onload = function (){
    var wrap = document.getElementById('Banner');
    var btnl = document.getElementById('btn-left');
    var btnr = document.getElementById('btn-right');
    var img = document.getElementById('img');
    var ol = document.getElementById('circle');
    var li = ol.getElementsByTagName('li')
    var timer = null;
    var num = 0;
    var arrUrl = ["./img/1.jpg","./img/2.jpg","./img/3.jpg","./img/4.png"]
    btnl.onclick = function (ev){
        num--;
        if(num<0){
            num= arrUrl.length-1;
        }
       changeImg();
    }

    btnr.onclick = function (ev){
        num++;
        if(num>arrUrl.length-1){
            num=0;
        }
        changeImg();
    };

    for(var i = 0; i < arrUrl.length; i++){
        li[i].index = i;
        li[i].onclick = function (ev){
            num = this.index;
            changeImg();
        }
    }
    setTimeout(autoPlay(),1000);

    wrap.onmouseover = function (ev){
        clearInterval(timer);
    };
    wrap.onmouseout = autoPlay;

    function changeImg(){
        img.src = arrUrl[num];
        for(var i = 0; i <li.length; i++){
            li[i].className="";
        }
        li[num].className = "on";
    }

    function autoPlay(){
        timer = setInterval(function(){
            num++;
            num %= arrUrl.length; 
            changeImg();
        },1000)
    }
}