JS滚轮公告,自己滚轮

首先我们可以看到下面的列表

		<div class="gun">
                 <h2>公告栏</h2>
             <div class="roll" id="roll">
                 <ul >
                     <li>第一个结构</li>
                     <li>第二个结构</li>
                     <li>第三个结构</li>
                     <li>第四个结构</li>
                     <li>第五个结构</li>
                     <li>第六个结构</li>
                     <li>第七个结构</li>
                     <li>第八个结构</li>
                     <li>第九个结构</li>
                     <li>第十个结构</li>
                 </ul>
             </div>
         </div>

在这里插入图片描述

现在我们利用js动画让列表从上到下滚动,到最后一个就接着从一开始,不断循环

$(document).ready(function(){
            setInterval(function(){  // 添加定时器,每1.5s进行转换
                $("#roll").find("ul:first").animate({
                    marginTop:"-20px"  //每次移动的距离
                },500,function(){   // 动画运动的时间
                    //$(this)指的是ul对象,
                    //ul复位之后把第一个元素和第二个元素插入
                    //到ul的最后一个元素的位置
                    $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
                  
                });
            },1500)
        });

这样我们就可以看到滚动的公告重复显示啦

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页