javascript实现内容播放幻灯片效果

javascript实现内容播放幻灯片效果
以后要做这效果就直接复制了，呵呵
<!-- css样式 -->
	<style type="text/css">
		#btn span{
			font-size:15px;
			height:15px;
			width:15px;
			background-color:#00ff00;
			border:1px solid #0066FF;
			text-align:center;
			margin-right:1px;
			float:left;
			cursor:pointer;
		}
		#btn span.hov{
			background-color: #0099FF;
		}
		p{
			border:#336666 solid 1px;
		}
	</style>	

    <div id="wai" style="cursor:pointer; margin:0px; height:88px; width:650px; overflow:hidden; position:relative;" onmouseover="clearAuto()" onmouseout="setAuto()">
    	<div id="image1" style="position:relative;top:0px; left:0px; height:88px; width:650px;"> 

    		  <p style="background-color:#66CC00;display:block; width:650px; height:88px;" alt="22">222222222222222

    		  <p style="background-color:#66FF66;display:block; width:650px; height:88px;" alt="44">444444444444444
			  555555555555555 		
    	</div>
<!-- 幻灯片切换按钮-->
    	<div id="btn" style="position:absolute; bottom:0px; right:0px; width:96px; ">
    	<span class="hov" onmouseover="set(0)"><font size="2">1</font></span>
			<span onmouseover="set(1)"><font size="2">2</font></span>
			<span onmouseover="set(2)"><font size="2">3</font></span>
			<span onmouseover="set(3)"><font size="2">4</font></span>
			<span onmouseover="set(4)"><font size="2">5</font></span>
    	</div>
    </div>
    <!-- javascript-->
	<script type="text/javascript">
	var n = 0;
	var banner = false;
	var numlist = document.getElementById("btn").getElementsByTagName("span");
	var imglist = document.getElementById("image1").getElementsByTagName("p");

	function set(value){
		//alert("value = "+value);
		n=value;
		document.getElementById("image1").style.filter="revealtrans(duration=2,transition="+Math.random()*24+")"; //自动生成滤镜效果（切换内容）

		for(var i=0;i<5;i++){
			i==value?numlist[i].className="hov":numlist[i].className=" ";//设置数字的css样式
		}
		try{
			with(image1){//火狐不支持滤镜效果，借用with来区分IE和火狐，火狐将用catc里的方式显示
				filters[0].apply();//以下为设置图片的
				for(i=0;i<5;i++) i==value?imglist[i].style.display="block":imglist[i].style.display="none";
				document.getElementById("image1").filters[0].play();
			}
		}catch(e){
			for(i=0;i<5;i++) i==value?imglist[i].style.display="block":imglist[i].style.display="none";
		}
         }         
//自动播放幻灯片
	function auto(){
		n++;
		if(n>=5) n=0;
		set(n);
	}
	function clearAuto(){clearInterval(banner);}
	function setAuto(){clearInterval(banner);banner=setInterval("auto()",4000)};
		setAuto();
	</script>