<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开标场地情况展示</title>
<style>
ul,li,dl,dd{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.layout{
text-align: center;
}
.list-info dl, .cycle{
90%;
overflow: hidden;
margin: 0 auto;
}
.list-info dd{
float: left;
text-align: center;
border-bottom: 1px solid #1B96EE;
height: 40px;
line-height: 40px;
}
.cycle li span{
display: block;
float: left;
}
.list-info dd:nth-child(1), .cycle li span:nth-child(1){
17%;
}
.list-info dd:nth-child(2), .cycle li span:nth-child(2){
18%;
}
.list-info dd:nth-child(3), .cycle li span:nth-child(3){
25%;
}
.list-info dd:nth-child(4), .cycle li span:nth-child(4){
40%;
}
.cycle{
height: 195px;
}
.cycle ul{
100%;
height: 195px;
}
.cycle li{
float: left;
100%;
height: 38px;
line-height: 38px;
border-bottom: 1px dashed #aaa;
}
</style>
</head>
<body>
<div class="layout">
<h1>(新系统)本日开标时间安排</h1>
<div class="list-info">
<dl>
<dd>时间</dd>
<dd>开标地点</dd>
<dd>标段编号</dd>
<dd>项目名称</dd>
</dl>
<div class="cycle">
<ul>
<li><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施刷卡即可看见</span></li>
<li><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施刷卡即可看见</span></li>
<li><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施刷卡即可看见</span></li>
<li><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施刷卡即可看见</span></li>
<li><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施刷卡即可看见</span></li>
<li><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施刷卡即可看见</span></li>
<li><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施刷卡即可看见</span></li>
<li><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施刷卡即可看见</span></li>
<li><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施刷卡即可看见</span></li>
<li><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施刷卡即可看见</span></li>
</ul>
</div>
</div>
</div>
<script src="../js/common/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
function autoScroll(obj){
$(obj).find("ul").animate({
marginTop : "-39px"
},500,function(){
console.log($(this));
$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
})
}
$(function(){
setInterval('autoScroll(".cycle")',3000);
});
</script>
</body>
</html>