jquery 文字上下轮播滚动效果

最新推荐文章于 2021-08-21 17:49:46 发布

dell_Luo

最新推荐文章于 2021-08-21 17:49:46 发布

阅读量1.4k

点赞数 8

分类专栏： jquery 文章标签： HTML CSS jQuery 滚动通知公告

本文链接：https://blog.csdn.net/dell_Luo/article/details/115755382

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

实现的效果:
在这里插入图片描述
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-02</span>中国招标投标协会关于聘任陈琦等六位同志职务的决定</a></li>
                       <li><a href="#"><span>02-03</span>中国招标投标协会关于聘任陈琦等六位同志职务的决定</a></li>
                       <li><a href="#"><span>02-04</span>中国招标投标协会关于聘任陈琦等六位同志职务的决定</a></li>
                       <li><a href="#"><span>02-05</span>中国招标投标协会关于聘任陈琦等六位同志职务的决定</a></li>
                       <li><a href="#"><span>02-06</span>中国招标投标协会关于聘任陈琦等六位同志职务的决定</a></li>
                       <li><a href="#"><span>02-07</span>中国招标投标协会关于聘任陈琦等六位同志职务的决定</a></li>
                       <li><a href="#"><span>02-08</span>中国招标投标协会关于聘任陈琦等六位同志职务的决定</a></li>
                       <li><a href="#"><span>02-09</span>中国招标投标协会关于聘任陈琦等六位同志职务的决定</a></li>
                   </ul>
               </div>
           </li>
           <li>更多<img src="../img/more.png" alt="" class="noticeMore"></li>
       </ul>
   </div>

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