简单jQuery网站公告逐行轮播效果

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简单jQuery网站公告逐行轮播效果相关的知识,希望对你有一定的参考价值。

CSS样式:

<style> *
{margin:0; padding:0;} ul,li{list-style:none;} a{text-decoration:none;} img{border:none; vertical-align:top;} #notice{width:500px; height:40px; position:relative; overflow:hidden; margin:50px auto; border:1px solid #CCC;} #notice ul{position:absolute;left:0; top:0;} #notice ul li{width:100%; height:40px; line-height:40px; text-indent:20px;} </style>
html结构:

<
div id="notice"> <ul> <li><a href="#">就让那一切成流水把那往事</a></li> <li><a href="#">把那往事当作一场宿醉</a></li> <li><a href="#">明日的酒杯莫再要装着昨天的伤悲</a></li> </ul> </div>
JS代码实现(需先导入jquery库文件):  

function
moveTop(obj,num,tag1,tag2){ //容器元素 滚动行数 父元素 子元素 var iH = $(obj).find(tag2).height(); $(obj+tag1).css(‘height‘,iH * $(obj).find(tag2).length); $(obj).find(tag1).animate({‘top‘:iH*num},500,function(){ $(this).css({top:0}).find(‘tag2:first‘).appendTo(this); }); } var timer = null; timer = setInterval(‘moveTop(".notice",1,"ul","li")‘,3000); //自动轮播 $(".notice").hover(function(){ //鼠标移入时停止自动轮播(鼠标移入移出事件也可用mouseover和mouseout来实现) clearInterval(timer); },function(){ timer = setInterval(‘moveTop(".notice",1,"ul","li")‘,3000); //鼠标移出时继续自动轮播 });

 

 

 

以上是关于简单jQuery网站公告逐行轮播效果的主要内容,如果未能解决你的问题,请参考以下文章

JQuery教程:实现轮播图效果

jquery图片轮播思路

Vue轮播图的实现及其与jQuery轮播图的简单对比|饥人谷前端教程

jquery简单自动轮播图代码怎么写

手机的轮播图可以用jquery来做吗

JQuery slidebox实现图片轮播