lzn 2019-06-20
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>