通过DOM简单实现文字的上下轮播滚动效果

jquery 文字上下轮播滚动效果

通过DOM简单实现文字的上下轮播滚动效果

以下是纯手打的代码：
html

<div class="contentNotice">
      <ul>
           <li><img src="../img/notice.png" alt=""></li>
           <li>
               <div class="scrollDiv" id="s1">
                   <ul class="contentNotice_loop">
                       <li><a href="#"><span>02-01</span>马化腾在深圳大学召开关于互联网知识相关研讨会</a></li>
                        <li><a href="#"><span>02-01</span>马化腾在深圳大学召开关于互联网知识相关研讨会</a></li>
                         <li><a href="#"><span>02-01</span>马化腾在深圳大学召开关于互联网知识相关研讨会</a></li>
                          <li><a href="#"><span>02-01</span>马化腾在深圳大学召开关于互联网知识相关研讨会</a></li>
                           <li><a href="#"><span>02-01</span>马化腾在深圳大学召开关于互联网知识相关研讨会</a></li>
                            <li><a href="#"><span>02-01</span>马化腾在深圳大学召开关于互联网知识相关研讨会</a></li>
                             <li><a href="#"><span>02-01</span>马化腾在深圳大学召开关于互联网知识相关研讨会</a></li>
                              <li><a href="#"><span>02-01</span>马化腾在深圳大学召开关于互联网知识相关研讨会</a></li>
                   </ul>
               </div>
           </li>
           <li>更多<img src="../img/more.png" alt="" class="noticeMore"></li>
       </ul>
   </div>

JS

function AutoScroll(obj) {
     $(obj).find("ul:first").animate({
         marginTop: "-54px"
     }, 1000, function () {
         $(this).css({
             marginTop: "0px"
         }).find("li:first").appendTo(this);
     });
 }
 $(document).ready(function () {
     setInterval('AutoScroll("#s1")', 3000);
 });

CSS

.contentNotice{
    margin-top: 20px;
    width: 100%;
    height: 54px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 2px;
}
.contentNotice ul{
    width: 100%;
    height: 54px;
}
.contentNotice ul:nth-child(1) li{
    float: left;
}
.contentNotice ul li:nth-child(1) img{
    width: 106px;
    height: 42px;
    margin: 6px 16px 6px 6px;
}
.contentNotice ul li:nth-child(2){
    width: 900px;
    height: 54px;
    font-size: 18px;
    line-height: 54px;
    color: #333333;
}
.contentNotice ul li:nth-child(2) span{
    display: inline-block;
    margin-right: 10px;
}
.contentNotice ul li:nth-child(3){
    float: right;
    margin-right: 15px;
    margin-top: 15px;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    border: 1px solid #CCCCCC;
    font-size: 12px;
    line-height: 24px;
    padding-left: 12px;
    color: #333333;
}
.contentNotice ul li:nth-child(3):hover{
    border: 1px solid #0F468D;
    color: #0F468D;
}
.contentNotice ul li:nth-child(3):hover .noticeMore {
    content: url(../img/morehover.png);
}
/* 新添加的轮播效果 */
.scrollDiv{
    width: 900px;
    height: 54px;
    overflow: hidden;
}
.contentNotice_loop a{
    color: #333333;
}
.contentNotice_loop{
    line-height: 54px;
    width: 900px;
    height: 54px;
}
.contentNotice_loop li{
    width: 100%;
}
/* 新添加的轮播效果 */