DOMによる文字の上下ローテーション効果を簡単に実現

<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-01span>                      a>li>
                        <li><a href="#"><span>02-01span>                      a>li>
                         <li><a href="#"><span>02-01span>                      a>li>
                          <li><a href="#"><span>02-01span>                      a>li>
                           <li><a href="#"><span>02-01span>                      a>li>
                            <li><a href="#"><span>02-01span>                      a>li>
                             <li><a href="#"><span>02-01span>                      a>li>
                              <li><a href="#"><span>02-01span>                      a>li>
                   ul>
               div>
           li>
           <li>  <img src="../img/more.png" alt="" class="noticeMore">li>
       ul>
   div>

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);
 });

.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%;
}
/*          */