- 3/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
JavaScript配合CSS完成仿163游戏频道的图片翻页效果，每一第切换有淡入淡出的效果。
<html> <head> <title>163游戏频道图片翻页代码</title> <style type="text/css"> a{color:White;text-decoration:none;font-size:11pt; font-family:Times New Roman} .dian{color:White;font-size:11pt; font-family:Times New Roman; border:1px solid #66ff66; width: 18px; height: 18px; cursor:hand; position:absolute; top:235px;left:300px} .dd{margin-left:0px; display:none} img{width: 355px; height: 242px;display:none} #wo{width: 356px; height: 260px; filter:progid:DXImagetransform.Microsoft.GradientWipe(duration=3,gradientSize=0.5,motion=forward )} #ri{BACKGROUND: #000;filter:alpha(opacity=50); border:0px; position:absolute; width: 353px; height: 20px;top:235px;left:11px} </style> <script type="text/javascript"> function wori(value) { plays(value); plays1(value); plays2(value); } function plays(value) { with(wo) { filters[0].Apply(); for(i=0;i<3;i++)i==value?children[i].style.display="block":children[i].style.display="none"; filters[0].play(); } } function plays1(value) { for(i=0;i<3;i++) { document.getElementById('Li'+i).style.display='none'; } document.getElementById('Li'+value).style.display='block'; } function plays2(value) { for(i=0;i<3;i++) { document.getElementById('d'+i).style.backgroundColor=''; } document.getElementById('d'+value).style.backgroundColor='#40e1ff'; } </script> </head> <body > <form id="form1"> <div> <div id="wo" > <img style="display:block; " src="http://p1.mb5u.com/texiao/1/20110225160452196.jpg" id="img1"/> <img src="http://p1.mb5u.com/texiao/1/20110225160452197.jpg" id="img2" /> <img src="http://p1.mb5u.com/texiao/1/20110225160452198.jpg" id="img3" /> </div> <div id="ri" > <div class="dd" id="Li0" style="display:block" ><a href="/" target=_blank>学院首页</a></div> <div class="dd" id="Li1" ><a href="/" target=_blank>编程学院</a></div> <div class="dd" id="Li2" ><a href="/" target=_blank>网页特效</a> </div> </div> <div id="d0" class="dian" style="background-color:#40e1ff" onclick="wori(0)"> 1</div> <div id="d1" class="dian" style="left:320px" onclick="wori(1)" > 2</div> <div id="d2" class="dian" style="left:340px" onclick="wori(2)"> 3 </div> </div> </form> </body> </html>