jquery 文字上下轮播滚动效果

实现的效果:

html代码:

"contentNotice">
      

           
"../img/notice.png" alt="">
           

               
"scrollDiv" id="s1">
                   
"contentNotice_loop">
                       
"#">02-01中国招标投标协会关于聘任陈琦等六位同志职务的决定
                       
"#">02-02中国招标投标协会关于聘任陈琦等六位同志职务的决定
                       
"#">02-03中国招标投标协会关于聘任陈琦等六位同志职务的决定
                       
"#">02-04中国招标投标协会关于聘任陈琦等六位同志职务的决定
                       
"#">02-05中国招标投标协会关于聘任陈琦等六位同志职务的决定
                       
"#">02-06中国招标投标协会关于聘任陈琦等六位同志职务的决定
                       
"#">02-07中国招标投标协会关于聘任陈琦等六位同志职务的决定
                       
"#">02-08中国招标投标协会关于聘任陈琦等六位同志职务的决定
                       
"#">02-09中国招标投标协会关于聘任陈琦等六位同志职务的决定
                   
               
           
           
更多"../img/more.png" alt="" class="noticeMore">
       
   

jquery代码(需引入jquery以及swiper):

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%;
}
/* 新添加的轮播效果 */

谢谢大家