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

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="javascript兑现内容播放幻灯片效果">222222222222222            <p style="background-color:#66FF66;display:block; width:650px; height:88px;" alt="javascript兑现内容播放幻灯片效果">444444444444444  555555555555555     </div><!-- 幻灯片切换按钮-->    <div id="btn" style="position:absolute; bottom:0px; right:0px; width:96px; ">    <span 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>