一款比较好看的javascript轮播图代码

好看的javascript轮播图效果

完整代码如下：

window.οnlοad=function ()
{
	var oDiv=document.getElementById('box');
	var aPicLi=document.getElementById('pic_list').getElementsByTagName('li');
	var aTxtLi=document.getElementById('text_list').getElementsByTagName('li');
	var oIcoUl=document.getElementById('ico_list').getElementsByTagName('ul')[0];
	var aIcoLi=document.getElementById('ico_list').getElementsByTagName('li');
	var oBtnPrev=document.getElementById('btn_prev');
	var oBtnNext=document.getElementById('btn_next');
	var iNowUlLeft=0;
	var iNow=0;
	var i=0;
	
	oBtnPrev.οnclick=function ()
	{
		if(iNowUlLeft>0)
		{
			iNowUlLeft--;

			fixUlLeft();
		}
	};
	
	function fixUlLeft()
	{
		oBtnPrev.className=iNowUlLeft==0?'btn':'btn showBtn';
		oBtnNext.className=iNowUlLeft==(aIcoLi.length-7)?'btn':'btn showBtn';
		miaovStartMove(oIcoUl, {left: -aIcoLi[0].offsetWidth*iNowUlLeft}, MIAOV_MOVE_TYPE.BUFFER);
	}
	
	oBtnNext.οnclick=function ()
	{
		if(iNowUlLeft<aIcoLi.length-7)
		{
			iNowUlLeft++;
			
			fixUlLeft();
		}
	};
	
	for(i=0;i<aIcoLi.length;i++)
	{
		aIcoLi[i].index=i;
		aIcoLi[i].οnclick=function ()
		{
			if(iNow==this.index)
			{
				return;
			}
			
			iNow=this.index;
			
			tab();
		};
	}
	
	function tab()
	{
		for(i=0;i<aIcoLi.length;i++)
		{
			aIcoLi[i].className='';
			aTxtLi[i].getElementsByTagName('h2')[0].className='';
			aPicLi[i].style.filter='alpha(opacity:0)';
			aPicLi[i].style.opacity=0;
			miaovStopMove(aPicLi[i]);
		}
		aIcoLi[iNow].className='active';
		aTxtLi[iNow].getElementsByTagName('h2')[0].className='show';
		miaovStartMove(aPicLi[iNow], {opacity: 100}, MIAOV_MOVE_TYPE.BUFFER);
	}
	
	function autoPlay()
	{
		iNow++;
		
		if(iNow>=aIcoLi.length)
		{
			iNow=0;
		}
		
		if(iNow<iNowUlLeft)
		{
			iNowUlLeft=iNow;
		}
		else if(iNow>=iNowUlLeft+7)
		{
			iNowUlLeft=iNow-6;
		}
		
		fixUlLeft();
		tab();
	}
	
	var timer=setInterval(autoPlay, 3000);
	
	oDiv.οnmοuseοver=function ()
	{
		clearInterval(timer);
	};
	
	oDiv.οnmοuseοut=function ()
	{
		timer=setInterval(autoPlay, 3000);
	};
};

body,ul,h2{margin:0;padding:0; font:12px/20px Tahoma,"hiragino sans gb",Helvetica,Arial;}
img{border:none;}
li{list-style:none;}
body{background:#101010;}
#box{width:660px;height:330px;position:relative;overflow:hidden;margin:60px auto 0;}
#pic_list{position:relative;z-index:1;}
#pic_list li{position:absolute;left:0;top:0;opacity:0;fliter:alpha(opacity=0);z-index:1;}
.mark{height:90px;width:660px;background:#000;position:absolute;left:0;bottom:0;opacity:0.3;filter:alpha(opacity=30);}
#text_list{position:absolute;bottom:60px;left:50px;position:absolute;z-index:5;height:20px;overflow:hidden;}
#text_list h2{display:none;}
#text_list .show{display:block;}
#text_list a{color: #FFFFFF;font-family: "Microsoft YaHei";font-size: 18px;font-weight: normal;text-decoration:none;}
#ico_list{position:absolute;bottom:10px;left:12px;width:525px;overflow:hidden;height:46px;z-index:3;}
#ico_list ul{width:1050px;position:absolute;left:0;top:0;}
#ico_list li{width:75px;float:left;}
#ico_list li a{width:68px;padding-top:6px;display:block;}
#ico_list li a img{border: 2px solid #DFE8E4; height:36px;width:64px;background:#040303;opacity:0.7;filter:alpha(opacity=70);}
#ico_list .active{background:url(../img/a_hover.gif) no-repeat center 0;}
#ico_list .active img{opacity:1;filter:alpha(opacity=100);border: 3px solid #fff; height:34px;width:62px;}
.btn{background:url(../img/btn.gif) no-repeat;height:38px;width:38px;position: absolute;bottom:11px; opacity:0.5;filter:alpha(opacity=50);cursor:default;z-index:3;}
.showBtn{ opacity:1;filter:alpha(opacity=100);cursor:pointer;z-index:4;}
#btn_prev{right:56px;}
#btn_next{right:20px;background-position:right 0;}

学习资料地址： 幻.zip - 蓝奏云