广告轮播效果

之前公司仿支付宝做的一个登录页，需广告从中间向两边平铺整个页面即宽度为100%，广告有轮播的效果。以下是代码：

html：

<div class="banner" id="slidebox">
               <ul class="bglist">
                 <li class="current list_one"></li>
                 <li class="list_two"></li>
               </ul>
               <ul class="countbtn">
                 <li class="current"></li>
                 <li></li>
               </ul>  
</div>

css:

.banner{ position:absolute; left:0; top:72px; width:100%; height:550px;}
.banner .bglist{ position:relative; width:100%; height:550px; overflow:hidden; background-color:#FFF;}
.banner .bglist li{ position:absolute; top:0; left:0; width:100%; height:550px; opacity:0;filter:alpha(opacity=0);}
.banner .bglist li.list_one{background:url(../images/login_02.jpg) no-repeat center center;}
.banner .bglist li.list_two{background:url(../images/login_01.jpg) no-repeat center center;}
.banner .bglist li.current{opacity:1;filter:alpha(opacity=100);}
.login_box .banner .countbtn{ position:absolute; left:45%; bottom:22px}
.banner .countbtn li{float:left; width:15px; height:15px; background:url(../images/login_btn_32.png) no-repeat; cursor:pointer; margin-right:25px; overflow:hidden; opacity:0.7;filter:alpha(opacity=70); cursor:pointer;}
.banner .countbtn li.current{ background:url(../images/login_btn_30.png) no-repeat; opacity:1; filter:alpha(opacity=100);}

js:

//slide自动播放
function slide_focus(){
    var oBox = document.getElementById("slidebox");
    var aUl = oBox.getElementsByTagName("ul");
    var aImg = aUl[0].getElementsByTagName("li");
    var aNum = aUl[1].getElementsByTagName("li");
    var timer = null;
    var play = null;
    var i = 0;
    var index = 0;    
    var bOrder = true;
    
    for (i = 0; i < aNum.length; i++)
    {
        aNum[i].index = i;
        aNum[i].onclick = function ()
        {
            show(this.index);
        };
    }
    oBox.onmouseover = function (){  clearInterval(play);    };
    oBox.onmouseout = function (){   autoPlay(); };
    function autoPlay ()
    {
        play = setInterval(function () {
            bOrder ? index++ : index--;            
            index >= aImg.length - 1 && (index = aImg.length - 1, bOrder = false);
            index <= 0 && (index = 0, bOrder = true);
            show(index);
        },5000);    
    }
    autoPlay();
    function show (a)
    {
        index = a;
        var alpha = 0;
        for (i = 0; i < aNum.length; i++)aNum[i].className = "";
        aNum[index].className = "current";
        clearInterval(timer);            
        for (i = 0; i < aImg.length; i++)
        {
            aImg[i].style.opacity = 0;
            aImg[i].style.filter = "alpha(opacity=0)";    
        }
        timer = setInterval(function () {
            alpha += 2;
            alpha > 100 && (alpha =100);
            aImg[index].style.opacity = alpha / 100;
            aImg[index].style.filter = "alpha(opacity = " + alpha + ")";
            alpha == 100 && clearInterval(timer);
        },50);
    }
   }