ZblogPHP网站添加首页滚动公告栏
相信下图这种首页滚动公告栏并不陌生吧？为了展示滚动效果，莹莹特意截图了一个滚动到一半的图片。如何为ZblogPHP网站添加这种首页滚动公告栏呢？
1、为首页调用JS文件添加以下滚动代码：
// 文字滚动
(function($){$.fn.textSlider=function(settings){settings=jQuery.extend({speed:"normal",line:2,timer:1000},settings);return this.each(function(){$.fn.textSlider.scllor($(this),settings)})};$.fn.textSlider.scllor=function($this,settings){var ul=$("ul:eq(0)",$this);var timerID;var li=ul.children();var _btnUp=$(".up:eq(0)",$this);var _btnDown=$(".down:eq(0)",$this);var liHight=$(li[0]).height();var upHeight=0-settings.line*liHight;var scrollUp=function(){_btnUp.unbind("click",scrollUp);ul.animate({marginTop:upHeight},settings.speed,function(){for(i=0;i<settings.line;i++){ul.find("li:first").appendTo(ul)}ul.css({marginTop:0});_btnUp.bind("click",scrollUp)})};var scrollDown=function(){_btnDown.unbind("click",scrollDown);ul.css({marginTop:upHeight});for(i=0;i<settings.line;i++){ul.find("li:last").prependTo(ul)}ul.animate({marginTop:0},settings.speed,function(){_btnDown.bind("click",scrollDown)})};var autoPlay=function(){timerID=window.setInterval(scrollUp,settings.timer)};var autoStop=function(){window.clearInterval(timerID)};ul.hover(autoStop,autoPlay).mouseout();_btnUp.css("cursor","pointer").click(scrollUp);_btnUp.hover(autoStop,autoPlay);_btnDown.css("cursor","pointer").click(scrollDown);_btnDown.hover(autoStop,autoPlay)}})(jQuery);2、用到的CSS有下面这些：
.breadcrumb {
margin:5px auto;
padding-left:10px;
width:825pt;
height:30px;
line-height:30px
}
.bull {
float:left;
margin-top:4px;
width:25px;
height:23px;
background:url(../image/bulletin.gif) no-repeat
}
@media screen and (max-width:1100px) {
#colophon,#content,.breadcrumb,.footer-widget {
width:100%}
}
.scrolltext {
overflow:hidden;
width:70%;
height:30px;
line-height:30px
}
.scrolltext ul li {
overflow:hidden;
height:30px;
text-overflow:ellipsis;
white-space:nowrap;
word-wrap:normal
}
.scrolltext-title a {
color:#c01e22
}3、在需要展示滚动公告栏的位置添加如下调用代码：
<nav class="breadcrumb">
<div id="scrolldiv">
<div class="bull"></div>
<div class="scrolltext">
<ul style="margin-top: 0px;"><li class="scrolltext-title"><a href="https://www.ynyn34.com/" rel="bookmark" target="_blank">这是zblog滚动公告栏</a></li></ul>
</div>
</div>
<script type="text/javascript">$(document).ready(function() {$("#scrolldiv").textSlider({line: 1, speed: 1000, timer: 3000});})</script>
</nav>每复制一行li标签内容，就会新增一条滚动公告。
