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

Posted 2020-09-10

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);         //鼠标移出时继续自动轮播
});