幻灯片特效：Js+CSS实现不需要flash

发布时间：2018-09-14 17:05:32 所属栏目：Asp教程来源：站长网

导读：烈火网(LieHuo.Net)教程今天在某技术论坛转的时候看到一个漂亮的幻灯片效果，是基于js与css打造的，在以前的文章中，我们也曾经发表过关于此类的文章，例如《JavaScript+Css打造的图片轮播幻灯片效果》，与此效果不同之处是链接文字出现在图片的外围，请

　　烈火网(LieHuo.Net)教程今天在某技术论坛转的时候看到一个漂亮的幻灯片效果，是基于js与css打造的，在以前的文章中，我们也曾经发表过关于此类的文章，例如《JavaScript+Css打造的图片轮播幻灯片效果》，与此效果不同之处是链接文字出现在图片的外围，请您直接见代码演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>幻灯片</title> <style type="text/css"> /*头图幻灯样式*/ #flash_show_out { FONT: 12px arial,simsun,sans-serif; WIDTH: 296px; POSITION: relative; HEIGHT: 216px; BACKGROUND-COLOR: #fff; TEXT-ALIGN: center } #flash_show { position:relative; } #flash_img { FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); OVERFLOW: hidden; WIDTH: 296px; HEIGHT: 186px } #flash_img img { WIDTH: 296px; HEIGHT: 186px; } #flash_btn { Z-INDEX: 202; RIGHT: 0px; LEFT: 216px; WIDTH: 80px; POSITION: absolute; TOP: 166px; } #flash_btn DIV { FLOAT: left; WIDTH: 20px } #flash_btn DIV A { DISPLAY: block; FONT-SIZE: 10px; padding-top:3px; OVERFLOW: hidden; WIDTH: 20px; COLOR: #ffffff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; HEIGHT: 17px; TEXT-DECORATION: none } #flash_btn DIV A:hover { DISPLAY: block; FONT-SIZE: 10px; COLOR: #ffffff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none } #flash_show_ctl { Z-INDEX: 20; LEFT: 0px; WIDTH: 298px; POSITION: absolute; TOP: 186px; HEIGHT: 30px } #flashtrans { Z-INDEX: 2; BACKGROUND: #FFF; FILTER: Alpha(opacity=100); LEFT: 0px;WIDTH: 298px; POSITION: absolute; TOP: 186px; HEIGHT: 30px; moz-opacity: .7; opacity: .7 } #flash_show_ctl_msg { PADDING: 2px 4px 0px 4px; FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); FLOAT: left; OVERFLOW: hidden; WIDTH: 289px; TEXT-ALIGN: center } #flash_show_ctl A { FONT: bold 14px/28px Arial,'宋体'; COLOR: #004f96; TEXT-DECORATION: none } #flash_show_ctl A:hover { COLOR: #004f96; TEXT-DECORATION: none } #flash_show_ctl_tuber { Z-INDEX: 100; LEFT: 305px; POSITION: relative; TOP: -17px } #flash_show_ctl_arrow { MARGIN-RIGHT: 5px } </style> </head> <body> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="table"> <tr> <td align="center" valign="middle"><table width="298" height="210" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="210" align="center" valign="top" style="padding:6px 0px 0px 0px" border="0" cellpadding="0" cellspacing="0"> <div id="slider_show" style="display:none;"><img src=http://www.aspzz.cn/uploads/allimg/180827/21240163E_0.jpg title="liehuo.net" border=0><a href=http://www.veryhuo.com title="liehuo.net">基于JQuery的三款菜单与图片特效</a><img src=http://www.aspzz.cn/uploads/allimg/180827/21234C933_0.jpg title="liehuo.net" border=0><a href=http://www.veryhuo.com title="liehuo.net">鼠标滑动实时显示坐标方位的特效</a><img src=http://www.aspzz.cn/uploads/allimg/180827/2123262W4_0.jpg title="liehuo.net" border=0><a href=http://www.veryhuo.com title="liehuo.net">蜡烛跟随鼠标点亮周围网页的特效</a><img src=http://www.aspzz.cn/uploads/allimg/180827/21225Ka2_0.jpg title="liehuo.net" border=0><a href=http://www.veryhuo.com title="liehuo.net"><b>Java</b>Script+Css打造的图片轮播幻灯</a></div> <div id=flash_show_out> <div id=flash_show> <div id=flash_img></div> <div id=flashtrans></div> <div id=flash_btn> <div><a id=aimg0 onClick="javascript:showImage(0);return false;" href="http://www.veryhuo.com" title="liehuo.net" target=_self name=Home/community/topic/lantern>1</a></div> <div><a id=aimg1 onClick="javascript:showImage(1);return false;" href="http://www.veryhuo.com" title="liehuo.net" target=_self name=Home/community/topic/lantern>2</a></div> <div><a id=aimg2 onClick="javascript:showImage(2);return false;" href="http://www.veryhuo.com" title="liehuo.net" target=_self name=Home/community/topic/lantern>3</a></div> <div><a id=aimg3 onClick="javascript:showImage(3);return false;" href="http://www.veryhuo.com" title="liehuo.net" target=_self name=Home/community/topic/lantern>4</a></div> </div> <div style="width:296px;height:20px;position:absolute;top:166px;left:0px;FILTER: Alpha(opacity=30);z-index:200;background-color:#000"></div> </div> <div id=flash_show_ctl> <div id=flash_show_ctl_msg><a id=flash_title target="_blank"></a></div> </div> </div> </td> </tr> </table> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' title="liehuo.net" target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：南平站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

asp解析rss	ASP代码隐秘图片的真
asp中Request.ServerV	注意准确定时运行ASP文