<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--兼容IE-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery新闻列表文字循环滚动代码 - 站长素材</title>
<link rel="stylesheet" type="text/css" href="css/roll.css">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="news-scroll">
<ul class="roll">
<li class="roll_1"><a href=""><e>2017-12-28</e><p>装配式发展如火如荼，我们为您整理了2017年关于装配式不可不知的几件事11.</p></a></li>
<li class="roll_2"><a href=""><e>2018-12-28</e><p>装配式发展如火如荼，我们为您整理了2018年关于装配式不可不知的几件事.</p></a></li>
<li class="roll_3"><a href=""><e>2019-12-28</e><p>装配式发展如火如荼，我们为您整理了2019年关于装配式不可不知的几件事.</p></a></li>
<li class="roll_4"><a href=""><e>2020-12-28</e><p>装配式发展如火如荼，我们为您整理了2020年关于装配式不可不知的几件事.</p></a></li>
<li class="roll_5"><a href=""><e>2021-12-28</e><p>装配式发展如火如荼，我们为您整理了2021年关于装配式不可不知的几件事.</p></a></li>
</ul>
<script>
$(function () {
/*消息滚动*/
var $ul = $('.roll');
var timeID;
function roll() {
clearInterval(timeID);
timeID = setInterval(function () {
clearInterval(timeID);
$ul.animate({ top: "0px" }, 1000, function () {
$ul.find("li:first").removeClass().addClass('roll_hide').appendTo($ul);
for(var i=0;i<5;i++){
$ul.find("li").eq(i).removeClass().addClass('roll_'+ (i+1) +'')
}
roll()
})
}, 1000);
}
roll()
})
</script>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：Chrome、FireFox、360、搜狗、Opera、傲游. 不支持Windows版Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>
