一款比较好看的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)
		{
			iNow=0;
		}
		
		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 - 蓝奏云