最最先以为这个结果并不难完成,应用scrollTop和计时器就能够了,然则写完代码后却一直不能完成内容的转动结果,重复搜检JS代码,都没题目。歇息了一会儿,重新最先理清思绪,从HTML代码最先,一步一步搜检,蓦地发明,是CSS款式编写有毛病,代码以下:
<div class="notice">
<div class="notice_title">关照通告</div>
<div class="notice_list" id="notice_list_content">
<ul>
<li>
<a href="#">西南交通大学面向海内外公然雇用部份治理岗亭的通告(2016年第4号)</a>
<span class="date">2016-09-27</span>
</li>
<li><a href="#">关于沱江河住手放水及犀浦校区人工湖水位相干状况的转达</a><span class="date">2016-09-27</span></li>
<li><a href="#">关于构造2016年国庆“老年健身走“运动的关照</a><span class="date">2016-09-27</span></li>
<li><a href="#">关于举办“交通范畴生长现状及干部生长”公然课的关照</a><span class="date">2016-09-27</span></li>
</ul>
</div><!-- notice_title完毕 -->
</div><!-- notice完毕 -->
应当设置id=”notice_list_content”的div宽度和高度,而不是class=”notice”的div宽度和高度,调解以后,信息转动结果胜利完成。
完全代码以下:
<!--CSS代码-->
<style type="text/css">
a {
text-decoration: none;
}
.notice {
width: 840px;
margin: 0 auto;
margin-top: 10px;
height: 45px;
}
.notice_title {
color: #fff;
font-family: "微软雅黑";
font-size: 16px;
margin-top: 10px;
padding: 5px 8px 5px 20px;
text-align: center;
background-color:#025483;
width: 120px;
float: left;
}
.notice_list {
width: 680px;
float: right;
height: 33px;
overflow: hidden;
}
.notice_list li{
list-style-type: none;
height: 33px;
}
.notice_list a:link,.notice_list a:visited{
color: #333;
font-size: 16px;
}
.notice_list a:hover,.notice_list a:active{
color: #025483;
font-weight: bold;
}
.date {
color: #888;
font-size: 14px;
float: right;
}
</style>
<!--HTML代码-->
<div class="notice">
<div class="notice_title">关照通告</div>
<div class="notice_list" id="notice_list_content">
<ul>
<li>
<a href="#">西南交通大学面向海内外公然雇用部份治理岗亭的通告(2016年第4号)</a>
<span class="date">2016-09-27</span>
</li>
<li><a href="#">关于沱江河住手放水及犀浦校区人工湖水位相干状况的转达</a><span class="date">2016-09-27</span></li>
<li><a href="#">关于构造2016年国庆“老年健身走“运动的关照</a><span class="date">2016-09-27</span></li>
<li><a href="#">关于举办“交通范畴生长现状及干部生长”公然课的关照</a><span class="date">2016-09-27</span></li>
</ul>
</div><!-- notice_title完毕 -->
</div>
<!--JS代码-->
<script type="text/javascript">
var area = document.getElementById('notice_list_content');
area.innerHTML += area.innerHTML;
area.scrollTop = 0;
var timer;
function startMove(){
timer = setInterval(scrollUp,50);
area.scrollTop++;
}
function scrollUp()
{
if(area.scrollTop%33 === 0)
{
clearInterval(timer);
setTimeout(startMove,1000);
}
else
{
area.scrollTop++;
if(area.scrollTop >= area.scrollHeight/2)
{
area.scrollTop = 0;
}
}
}
setTimeout(startMove,1000);
</script>