基于jQuery的超大全屏背景/幻灯片自动播放

发布时间：2018-10-14 17:41:45 所属栏目：Asp教程来源：站长网

导读：这是一款基于 jQuery 的超大全屏背景/幻灯片自动播放的优秀插件，来自于国外的设计网站，前几日烈火小编在国外网站闲逛时发现的，不敢独自使用，特别来分享给大家，感觉好的话，别忘记顶一下哦！友情提示：JQuery的特效代码，点击运行后可能需要刷新才能

　　这是一款基于jQuery的超大全屏背景/幻灯片自动播放的优秀插件，来自于国外的设计网站，前几日烈火小编在国外网站闲逛时发现的，不敢独自使用，特别来分享给大家，感觉好的话，别忘记顶一下哦！

　　友情提示：JQuery的特效代码，点击运行后可能需要刷新才能正常显示效果！

　　效果如下：

<!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" lang="gb2312"> <head profile="http://gmpg.org/xfn/11"> <title>基于jQuery的超大全屏背景/幻灯片自动播放 - Liehuo.Net</title> <meta http-equiv="content-type" content="text/html; charset=GBK" /> <script type="text/javascript" src="http://www.veryhuo.com/uploads/Common/jquery-1.3.2.min.js"></script> <script src="http://www.veryhuo.com/uploads/Common/js/effects.core.js"></script> <script src="http://www.veryhuo.com/uploads/Common/js/effects.slide.js"></script> <script src="http://www.veryhuo.com/uploads/Common/js/supersized.2.0.js"type="text/javascript" ></script> <script type="text/javascript"> $(function(){ $.fn.supersized.options = { startwidth: 640, startheight: 480, vertical_center: 1, slideshow: 1, navigation: 1, transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left pause_hover: 0, slide_counter: 1, slide_captions: 1, slide_interval: 3000 }; $('#supersize').supersized(); }); </script> <style type="text/css"> *{ margin:0; padding:0; } a{ color:#8FC2FF; text-decoration: none; outline: none; } a:hover{ text-decoration: underline; } img{ border:none; } body { overflow:hidden;/*Needed to eliminate scrollbars*/ background:#000; } #content{ margin:0px auto; height:100px; width:100%; bottom:5%; z-index: 3; background:#262626 no-repeat 90%; border-top:1px solid #000; border-bottom:1px solid #4F4F4F; position:absolute; } #contentframe{ overflow: hidden; border-top:solid 1px #4F4F4F; border-bottom:1px solid #000; height: 100%; text-align:left; z-index: 3; } #slidecounter{ float:left; color:#4F4F4F; font:50px "Helvetica Neue", Arial, sans-serif; font-weight:bold; margin:18px 20px; } #slidecaption{ overflow: hidden; float:left; color:#FFF; font:26px "Helvetica Neue", Arial, sans-serif; font-weight:bold; margin:33px 0; } /*Supersized Stamp*/ .stamp{ float: right; margin: 25px 20px 0 0; } /*Supersize Plugin Styles*/ #navigation{ background: url('http://www.veryhuo.com/uploads/allimg/1001/jqueryfull/navbg.gif') no-repeat; float: right; margin:22px 20px 0 0; } #loading { position: absolute; top: 49.5%; left: 49.5%; z-index: 3; width: 24px; height: 24px; text-indent: -999em; background-image: url(http://www.veryhuo.com/uploads/allimg/1001/jqueryfull/progress.gif); } #supersize{ position:fixed; } #supersize img, #supersize a{ height:100%; width:100%; position:absolute; z-index: 0; } #supersize .prevslide, #supersize .prevslide img{ z-index: 1; } #supersize .activeslide, #supersize .activeslide img{ z-index: 2; } </style> </head> <body>  <div id="loading"> </div>  <div id="supersize"> <a href="http://www.veryhuo.com/"><img src="http://www.veryhuo.com/uploads/common/images/liehuo_1024x768_1.jpg" title="欢迎访问烈火网！" /></a> <a href="http://www.veryhuo.com/"><img src="http://www.veryhuo.com/uploads/common/images/liehuo_1024x768_2.jpg" title="网址：http://www.veryhuo.com" /></a> <a href="http://www.veryhuo.com/"><img src="http://www.veryhuo.com/uploads/common/images/liehuo_1024x768_3.jpg" title="我们致力于为WEB开发、网页设计与网站运营提供动力！" /></a> </div>  <div id="content"> <div id="contentframe"> <div id="slidecounter"> <span class="slidenumber"></span>/<span class="totalslides"></span> </div> <div id="slidecaption"></div>  <a href="http://www.veryhuo.com/" class="stamp"><img src="http://www.veryhuo.com/uploads/common/images/logo_black.gif"/></a>  <div id="navigation"> <a href="#" id="prevslide"><img src="http://www.veryhuo.com/uploads/allimg/1001/jqueryfull/back_dull.gif"/></a><a href="#" id="pauseplay"><img src="http://www.veryhuo.com/uploads/allimg/1001/jqueryfull/pause_dull.gif"/></a><a href="#" id="nextslide"><img src="http://www.veryhuo.com/uploads/allimg/1001/jqueryfull/forward_dull.gif"/></a> </div> </div> </div> </body> </html>
提示：可修改后代码再运行!

（编辑：张掖站长网）

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