为你的网站加上Loading等待加载效果吧 | Loading页面加载添加教程效果图 :教程开始新建一个loading样式css将以下代码放进去 然后引用这个文件#Loadanimation{ background-color:#fff; height:100%; width:100%; position:fixed; z-index:1; margin-top:0px;top:0px; } #Loadanimation-center{ width:100%; height:100%; position:relative; } #Loadanimation-center-absolute{ position:absolute; left:50%; top:50%; height:200px; width:200px; margin-top:-100px; margin-left:-100px; } .xccx_object{ -moz-border-radius:50% 50% 50% 50%; -webkit-border-radius:50% 50% 50% 50%; border-radius:50% 50% 50% 50%; position:absolute; border-left:5px solid #87CEFA; border-right:5px solid #FFC0CB; border-top:5px solid transparent; border-bottom:5px solid transparent; -webkit-animation:animate 2.5s infinite; animation:animate 2.5s infinite; } #xccx_one{ left:75px; top:75px; width:50px; height:50px; } #xccx_two{ left:65px; top:65px; width:70px; height:70px; -webkit-animation-delay:0.1s; animation-delay:0.1s; } #xccx_three{ left:55px; top:55px; width:90px; height:90px; -webkit-animation-delay:0.2s;animation-delay:0.2s; } #xccx_four{ left:45px; top:45px; width:110px; height:110px; -webkit-animation-delay:0.3s; animation-delay:0.3s; } @-webkit-keyframes animate{50%{ -ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg); } 100%{-ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); transform:rotate(0deg); } } @keyframes animate{50%{ -ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg); } 100%{ -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); transform:rotate(0deg); } }第二步：将以下代码填写入头部文件 一般都为 header.php<div id="Loadanimation" style="z-index:999999;"> <div id="Loadanimation-center"> <div id="Loadanimation-center-absolute"> <div class="xccx_object" id="xccx_four"></div> <div class="xccx_object" id="xccx_three"></div> <div class="xccx_object" id="xccx_two"></div> <div class="xccx_object" id="xccx_one"></div> </div> </div> </div> <script> $(function(){ $("#Loadanimation").fadeOut(540); }); </script>注意 注意 fadeOut 里面填写的是毫秒数 本loading可以自定义 网上也有很多css的 只要替换第二步的代码都可以成功(JS代码别替换)

代码function text2links($str='') { if(!preg_match('/(http|www\.|@)/i', $str)) { return $str; } $lines = explode("<br />", $str); $new_text = ''; while (list($k,$l) = each($lines)) { // replace links: $l = preg_replace("/([ \t]|^)www\./i", "\\1http://www.", $l); $l = preg_replace("/([ \t]|^)ftp\./i", "\\1ftp://ftp.", $l); $l = preg_replace("/(http:\/\/[^ )!]+)/i", "<a href=\"\\1\">\\1</a>", $l); $l = preg_replace("/(https:\/\/[^ )!]+)/i", "<a href=\"\\1\">\\1</a>", $l); $l = preg_replace("/(ftp:\/\/[^ )!]+)/i", "<a href=\"\\1\">\\1</a>", $l); $l = preg_replace("/([-a-z0-9_]+(\.[_a-z0-9-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)+))/i", "<a href=\"mailto:\\1\">\\1</a>", $l); $new_text .= $l.'<br />'; } return $new_text; }

演示html<div id="slider" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#slider" data-slide-to="0" class="active"> </li> <li data-target="#slider" data-slide-to="1" class=""> </li> <li data-target="#slider" data-slide-to="2" class=""> </li> <li data-target="#slider" data-slide-to="3" class=""> </li> <li data-target="#slider" data-slide-to="4" class=""> </li> </ol> <div class="carousel-inner"> <div class="item active"> <a target="_blank" href="https://s.qiniu.com/yQVfQr"> <img src="https://dn-lego-static.qbox.me/1611832642-hudong.png"> <span class="carousel-caption"> 新客专享,优惠大酬宾 </span> <span class="carousel-bg"> </span> </a> </div> <div class="item active"> <a target="_blank" href="https://www.tx47.cn/xcbk-498.html"> <img src="https://www.tx47.cn/content/uploadfile/201903/thum-47761553978947.png"> <span class="carousel-caption"> 宝塔面板0.99买30天Linux专业版 </span> <span class="carousel-bg"> </span> </a> </div> <div class="item"> <a target="_blank" href="http://pay.4dn.net/"> <img src="http://4dn.net/img/3.png"> <span class="carousel-caption"> 蜘蛛快付 </span> <span class="carousel-bg"> </span> </a> </div> <div class="item"> <a target="_blank" href="http://4dn.net"> <img src="http://4dn.net/img/2.png"> <span class="carousel-caption"> 黑蜘蛛 </span> <span class="carousel-bg"> </span> </a> </div> <div class="item"> <a target="_blank" href="http://4dn.net/"> <img src="http://4dn.net/img/2.png"> <span class="carousel-caption"> 蜘蛛博客 </span> <span class="carousel-bg"> </span> </a> </div> </div> <a class="left carousel-control" href="#slider" role="button" data-slide="prev"> <span class="fa fa-angle-left" aria-hidden="true"> </span> </a> <a class="right carousel-control" href="#slider" role="button" data-slide="next"> <span class="fa fa-angle-right" aria-hidden="true"> </span> </a> </div>css/*幻灯片轮番*/ .category-job .header,.category-see .header,.page-template-pagesnavs-php .header,.page-template-pagestheme-php .header,.page-template-pagesthemes-php .header,.page-template-pagestools-php .header,.site-minicat .header{box-shadow:none;border-bottom:none;margin-bottom:0} .carousel{border:1px solid #eaeaea;padding:2px;margin-bottom:10px} .carousel-inner{width:100%} .carousel-inner>.item{position:relative;display:none;text-align:center;-webkit-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left} .carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1;width:100%;height:340px;margin-bottom:-10px} .carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block} .carousel-inner>.active{left:0} .carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%} .carousel-inner>.next{left:100%} .carousel-inner>.prev{left:-100%} .carousel-inner>.next.left,.carousel-inner>.prev.right{left:0} .carousel-inner>.active.left{left:-100%} .carousel-inner>.active.right{left:100%} .carousel-control{position:absolute;top:50%;left:2px;width:30px;height:50px;margin-top:-30px;font-size:20px;color:#fff;text-align:center;filter:alpha(opacity=35);opacity:.35;background-color:#000} .carousel-control.right{right:2px;left:auto} .carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;filter:alpha(opacity=70);outline:0;opacity:.7} .carousel-control .fa-angle-left,.carousel-control .fa-angle-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;margin-top:-10px;left:12px;z-index:5;display:inline-block} .carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;margin-top:-10px;font-family:serif} .carousel-control .icon-prev:before{content:'\2039'} .carousel-control .icon-next:before{content:'\203a'} .carousel-indicators{position:absolute;margin-bottom:0;bottom:0;right:12px;z-index:15;width:78%;height:47px;/* padding: 11px 0 0; */;text-align:right} .carousel-indicators li{display:inline-block;width:10px;height:10px;margin:15px 5px 0 0;text-indent:-999px;background-color:transparent;border:1px solid #fff;border-radius:10px} .carousel-indicators .active{background-color:#fff} .carousel-caption{position:absolute;right:0;bottom:0;left:0;z-index:10;text-align:left;padding:10px;margin-right:100px;overflow:hidden;color:#fff;font-size:16px} .asb,.asb-your,.branding{text-align:center} .carousel-bg{position:absolute;right:0;bottom:0;left:0;height:40px;z-index:9;background-color:#000;filter:alpha(opacity=70);opacity:.7} .site-navbar li:hover,.topmenu li:hover{z-index:2} .brand,.content,.sidebar,.site-navbar li{position:relative} .carousel-caption .btn{text-shadow:none} .carousel,.carousel-inner,.container,.header,.label{position:relative;overflow:hidden} .carousel {padding: 10px;box-sizing: initial;background: #fff;}