很多做网站优化的朋友网页修改静态页面,没办法实现网站幻灯片轮回效果,或是没办法实现公告轮播效果,这里为只懂css代码但是又不懂js代码的朋友提供整套幻灯片js轮播代码,和首页公告代码轮播!
<style>
#vcoo_anno{background:url("http://www.c2bseo.com/zb_users/theme/metro/style/images/gonggao.gif") no-repeat left top; height:28px; line-height:28px; overflow: hidden; border: 1px #dddddd dashed; margin-left:5px; padding-left: 30px; margin-bottom: 10px;}
</style>
<div id="vcoo_anno">
<div id="vcoo_announce">
<a href="http://www.c2bseo.com/zb_users/theme/metro/style/images/gonggao.gif" target="_blank"><font color="red">荣帅seo博客!点击获取公告图标</font></a><br />
</div>
</div>
<script>
//===============================================
// 目的:网站公告声明VC_Announce效果为:滚动一行停顿4秒,再滚动下一行
//===============================================
function ann_marquee(lh,speed,delay) {
//lh为行高lineheight,speed为滚动速度,delay为延迟、停顿的时间
var p=false;
var t;
var o=document.getElementById("vcoo_announce");
o.innerHTML+=o.innerHTML;
o.style.marginTop=0;
o.onmouseover=function(){p=true;}
o.onmouseout=function(){p=false;}
function start(){
t=setInterval(scrolling,speed);
if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
}
function scrolling(){
if(parseInt(o.style.marginTop)%lh!=0){
o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight/2) o.style.marginTop=0;
}else{
clearInterval(t);
setTimeout(start,delay);
}
}
setTimeout(start,delay);
}
ann_marquee(28,10,4000);
</script>
发表评论 取消回复