JavaScript 图片轮播 出现第一张和第二张中间错乱显示在一起 求高手
我下载了一个JS的图片轮播图片代码，我就改了一下宽度，和轮播尺寸，后来发现在打开的时候会出现这个第一张和第二张错乱刷新的时候会发现第一张和第二张显示在一起，求解决问题方法下图红圈处，我上传后的一个网址大家帮看一下
http://www.lailili.cn/tab/index.html



下面贴CSS代码 

@charset "utf-8";

/*tab 开始*/ 

*{margin:0;padding:0;list-style-type:none;}

a,img{border:0;}

#slideBox{width:560px;height:325px;overflow:hidden;position:relative;margin:0;}

#slideBox ul#show_pic{margin:0;padding:0;list-style:none;height:325px;width:3750px;position:absolute;}

#slideBox ul#show_pic li{float:left;margin:0;padding:0;height:325px;}

#slideBox ul#show_pic li img{display:block;}

#iconBall{position:absolute;bottom:0;right:0;}

#iconBall li{float:left;color:#7a7a7a;width:32px;height:28px;line-height:28px;cursor:pointer;text-align:center;font-size:14px;font-weight:bold;padding-top:4px;}

#iconBall li.active{background:url(tab/1.png) no-repeat;color:#fff;}

#slideText {width:560px;height:28px;background:rgba(0,0,0,0.7);color:#fff;position:absolute;left:0px;bottom:0px;*background:transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000);}

#textBall{position:absolute;left:10px;bottom:3px;}

#textBall li{float:left;cursor:pointer;display:none;color:#fff;font-size:14px;}

#textBall li.active{display:block;}

#textBall li a {text-decoration:none;color:#fff;}

/*tab 结束*/ 

下面贴JS代码 

// JavaScript Document

var glide =new function(){

	function $id(id){return document.getElementById(id);};

	this.layerGlide=function(auto,oEventCont,oTxtCont,oSlider,sSingleSize,second,fSpeed,point){

		var oSubLi = $id(oEventCont).getElementsByTagName('li');

		var oTxtLi = $id(oTxtCont).getElementsByTagName('li');

		var interval,timeout,oslideRange;

		var time=1; 

		var speed = fSpeed 

		var sum = oSubLi.length;

		var a=0;

		var delay=second * 1000; 

		var setValLeft=function(s){

			return function(){

				oslideRange = Math.abs(parseInt($id(oSlider).style[point]));	

				$id(oSlider).style[point] =-Math.floor(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +'px';		

				if(oslideRange==[(sSingleSize * s)]){

					clearInterval(interval);

					a=s;

				}

			}

		};

		var setValRight=function(s){

			return function(){	 	

				oslideRange = Math.abs(parseInt($id(oSlider).style[point]));							

				$id(oSlider).style[point] =-Math.ceil(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +'px';

				if(oslideRange==[(sSingleSize * s)]){

					clearInterval(interval);

					a=s;

				}

			}

		}

		

		function autoGlide(){

			for(var c=0;c<sum;c++){oSubLi[c].className='';oTxtLi[c].className='';};

			clearTimeout(interval);

			if(a==(parseInt(sum)-1)){

				for(var c=0;c<sum;c++){oSubLi[c].className='';oTxtLi[c].className='';};

				a=0;

				oSubLi[a].className="active";

				oTxtLi[a].className = "active";

				interval = setInterval(setValLeft(a),time);

				timeout = setTimeout(autoGlide,delay);

			}else{

				a++;

				oSubLi[a].className="active";

				oTxtLi[a].className = "active";

				interval = setInterval(setValRight(a),time);