html列表自动无限循环滚动,基于jQuery的公告无限循环滚动实现代码

基于jQuery的公告无限循环滚动实现代码，效果如下，多用于pc端电商网站之中不断的循环更新的公告消息。

写一个简单的小demo：

* {

margin: 0;

padding: 0;

}

li {

list-style: none;

}

body {

line-height: 1.5;

font-size: 14px;

}

.scroll {

display: inline-block;

overflow: hidden;

position: relative;

height: 50px;

}

.scroll ul {

transform: translateY(0);

}

.animate {

-webkit-transition: all .3s ease-out;

}

.scroll li {

overflow: hidden;

display: -webkit-box;

margin-left: 10px;

width: 90%;

height: 50px;

line-height: 30px;

color: #333;

text-overflow: ellipsis;

-webkit-line-clamp: 1;

-webkit-box-orient: vertical;

white-space: normal;

}

.scroll li img{

margin-top: 20px;

margin-right: 12px;

width: 12px;

height: 12px;

}

$(function() {

var scrollDiv = $(".scroll"),

$ul = scrollDiv.find("ul"),

$li = scrollDiv.find("li"),

$length = $li.length,

$liHeight = $li.height(),

num = 0;

if(scrollDiv.length == 0) {

return;

}

if($length > 1) {

$ul.append($li.eq(0).clone());

setInterval(

function() {

num++;

$ul.addClass("animate").css("-webkit-transform", "translateY(-" + $liHeight * (num) + "px)");

setTimeout(

function() {

if(num == $length) {

$ul.removeClass("animate").css("-webkit-transform", "translateY(0)");

num = 0;

}

}, 300);

}, 3000);

}

});