一个js动画当中的center函数怎么理解

<div id="mp-banner" class="mp-banner-slide">
    <ul id="mpList" class="mp-banner-list">
        <li class="item banner0">
            <a target="_blank">
                <img src="images/5.jpg" alt="发光武器装备，限量免费放送，等你哟！">
                <span class="mp-line-opacity">发光武器装备，限量免费放送，等你哟！</span>
            </a>
        </li>
        <li class="item banner1">
            <a target="_blank">
                <img src="images/6.jpg" alt="暗黑战神-极速3D动作手游">
                <span class="mp-line-opacity">暗黑战神-极速3D动作手游</span>
            </a>
        </li>
        <li class="item banner2">
            <a target="_blank">
                <img src="images/3.jpg" alt="传奇安卓手游，不删档内侧">
                <span class="mp-line-opacity">传奇安卓手游，不删档内侧</span>
            </a>
        </li>
        <li class="item banner3">
            <a target="_blank">
                <img src="images/4.jpg" alt="本年度最热门手机游戏<<放开那三国>>">
                <span class="mp-line-opacity">本年度最热门手机游戏&lt;&lt;放开那三国&gt;&gt;</span>
            </a>
        </li>
        <li class="item banner4">
            <a target="_blank">
                <img src="images/5.jpg" alt="最受欢迎的手机游戏<<时空猎人(街机格斗)>>">
                <span class="mp-line-opacity">最受欢迎的手机游戏&lt;&lt;时空猎人(街机格斗)&gt;&gt;</span>
            </a>
        </li>
    </ul>
    <div id="dots" class="mp-banner-dots">
        <a class="dot"></a>
        <a class="dot"></a>
        <a class="dot dot-active"></a>
        <a class="dot"></a>
        <a class="dot"></a>
    </div>
</div>





css==========

*{ margin:0; padding:0;}
body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#fff;}
table{border-collapse:collapse;border-spacing:0;}
li{list-style:none;}
fieldset,img{border:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
q:before,q:after{content:'';}
a:focus,input,textarea{outline-style:none;}
input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;}
textarea{resize:none}
address,caption,cite,code,dfn,em,i,th,var{font-style:normal;font-weight:normal;}
legend{color:#000;}
abbr,acronym{border:0;font-variant:normal;}
a{color:#0a8cd2;text-decoration:none;}
a:hover{text-decoration:underline;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
.clearfix{display:block;}
.clear{clear:both;height:0;font:0/0 Arial;visibility:hidden;}
.none{display:none}
/* main */
.mp-banner-slide{position:relative;width:980px;margin:0 auto;height:280px;*height:310px;*zoom:1;z-index:1;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none}
.mp-banner-slide .banner-next{right:0;left:auto;background-position:right 0}
.mp-banner-slide .mp-banner-list{position:relative;width:100%;height:240px;margin:30px 0 20px;*zoom:1;z-index:1}
.mp-banner-slide .mp-banner-list .item{position:absolute;box-shadow:0 5px 4px rgba(0,0,0,.3)}
.mp-banner-slide .mp-banner-list .item img{width:100%;height:100%;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px}
.mp-banner-slide .mp-banner-list .item span{position:absolute;bottom:0;left:0;height:30px;line-height:30px;font-size:16px}
.mp-banner-slide .mp-banner-list .banner0{left:0;top:48px;height:160px;width:240px;z-index:1}
.mp-banner-slide .mp-banner-list .banner1{top:24px;left:98px;height:200px;width:360px;z-index:2}
.mp-banner-slide .mp-banner-list .banner2{top:0;left:235px;width:550px;height:240px;z-index:3}
.mp-banner-slide .mp-banner-list .banner3{left:540px;top:24px;height:200px;width:360px;z-index:2}
.mp-banner-slide .mp-banner-list .banner4{left:735px;top:48px;height:160px;width:240px;z-index:1}
.mp-banner-slide .mp-banner-dots{text-align:center}
.mp-banner-slide .mp-banner-dots .dot{background:#c3c3c3;width:10px;height:10px;margin:0 5px;display:inline-block;cursor:pointer;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.mp-banner-slide .mp-banner-dots .dot-active{background:#FF7A01}

.mp-line-opacity{width:100%;z-index:9;overflow:hidden;color:#fff;background-color:rgba(0,0,0,.5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000',endColorstr='#80000000');text-align:center;zoom:1}
.mp-opacity-white{background-color:rgba(255,255,255,.9);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9fffffff',endColorstr='#9fffffff')}
:root .mp-line-opacity,:root .mp-opacity-white{filter:none\9!important}


js==================================

(function(){
        var box = document.getElementById('mp-banner');
        var ul = document.getElementById('mpList');
        var li = ul.getElementsByTagName('li');
        var len = li.length;
        var dots = document.getElementById('dots');
        var dot = dots.getElementsByTagName('a');
        var arr = [];
        for(var i = 0; i < len; i++){
            var item = li[i];
            arr.push({
                top : parseInt(css(item, 'top')),
                left : parseInt(css(item, 'left')),
                width : parseInt(css(item, 'width')),
                height : parseInt(css(item, 'height')),
                zIndex : parseInt(css(item, 'zIndex'))
            });
            dot[i].index = i;
            dot[i].onmouseover = function(){
                for (var i = 0; i < arr.length; i++) {
                    console.log(arr[i]);
                }
                scroll(this.index);
            }
        }
        function scroll(n){
            tab(n);
            var ret = center(n, arr.slice(0));
            for(var i = 0; i < len; i++){
                //console.log(ret[i]);
                li[i].style.zIndex = ret[i].zIndex;
                act(li[i], ret[i]);
            }
        }
        function tab(n){
            for(var i = 0; i < len; i++){
                dot[i].className = 'dot';
            }
            dot[n].className += ' dot-active';
        }
        function center(n, arr){
            n -= Math.floor(arr.length / 2);
            console.log(n);
            for(var i = 0; i < Math.abs(n); i++){
                if(n > 0){
                    arr.unshift(arr.pop());
                } else {
                    arr.push(arr.shift());
                }
            }
            return arr;
        }
        function css(obj, attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }
        function act(obj, json, fn){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var stop = true;
                for(var attr in json){
                    var target = json[attr];
                    var cur = parseInt(css(obj, attr));
                    var speed = (target - cur) / 8;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    if(target != cur){
                        stop = false;
                    }
                    cur += speed;
                    obj.style[attr] = cur + 'px';
                }
                if(stop){
                    clearInterval(obj.timer);
                    obj.timer = null;
                    fn && fn();
                }
            }, 30);
        }

    }());

js里面的center函数和我预想的不一样，我觉得移到第四个按钮时是最后一张图片移到第一张，为什么实际是第一张图片移到最后一张？