很多时候只看别人的代码时很难看懂。有很多原因，有时候可能是没有耐心，这时候看一下实现的原理就很快明白代码的内容，所以要加些注释，让自己让别人都能看明白；有的时候就是因为知识有限就是不懂，哪怕代码很简单，这就需要多学习了
<!DOCTYPE html>
<html>
<head>
<title>滚动公告</title>
<meta charset="utf-8"/>
<style type="text/css">
*{
padding: 0px;
margin:0px;
}
#container{
border: 1px yellow solid;
width: 500px;
height: 30px;
line-height:30px;
overflow: hidden;
}
.content{
width:500px;
}
</style>
</head>
<body>
<div id="container">
<div id="content" class="content">
<a href=# id="f12red1" class="f12red">1111111111111111111111111111111111111111</a><br/>
<a href=# class="f12red">222222222222222222222222222222222222222222</a><br/>
<a href=# class="f12red">33333333333333333333333333333333333333333333</a><br/>
</div>
<div id="content1" class="content"></div>
</div> <script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
//将content的内容复制到content1
$("#content1").html($("#content").html());
//实现的无缝滚动主函数
var marquee=function(){
if ($("#container").scrollTop() >= $("#content").height()) { //当滚动条隐藏的长度大于div1的宽度
$("#container").scrollTop(0);
}
else{
$("#container").scrollTop($("#container").scrollTop()+1); //每次滚动条往右移动1px；
} }
//主函数做循环
var mar=setInterval(marquee,100);
$(".f12red").mouseenter(function(){
clearInterval(mar);
}).mouseleave(function(){
mar=setInterval(marquee,100);
})
</script>
</body>
</html>
这段代码其实有一些缺陷，含需要认真打磨，希望高手指点。
1.滚动到第一个a标签有明显的延迟
2.当鼠标移动到上面时a标签无法移动到中间
3.在滚动是如果有延迟就更好了，方便用户观看相关内容
。