javascript - 我想实现滚动信息效果，自己写半天只达到这种效果，求修改！-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - 我想实现滚动信息效果，自己写半天只达到这种效果，求修改！

迷茫 2017-04-11 09:04:10

[JavaScript讨论组]

222

有没有类似的demo供参考,每次只显示一条！
有什么方法可以让第三条显示完成后再继续滑动显示第一条么，而不是直接又到第一条！

css

    *,p,ul,li{
        padding:0;
        margin:0;
    }
    .content{
        position: relative;
        background-color: red;
        height:40px;
        width:300px;
        margin:0 auto;
    }
        ul{
            height:40px;
            /*overflow: hidden;*/
            position: absolute;
            top:0;
        }
        li{
            height:40px;
            line-height: 40px;
            list-style: none;
        }

html

        <p class="content">
        <ul class="list">
            <li>test1</li>
            <li>test2</li>
            <li>test3</li>
        </ul>
        </p>

    <script>

        let i=0;
        function goTop(){                
                    ++i;
                    // console.log(i);
                    if(i==0){
                        $(".list").css("top",0);
                    }
                    if(i<3){
                    $(".list").animate({
                        top:-40*i
                    },1000)
                }
                else{                
                    i=-1;
                }        
            }

                setInterval(goTop,1000);
    </script>

迷茫

业精于勤，荒于嬉;行成于思，毁于随。

全部回复(4)

黄舟2017-04-11 09:06:10 4楼

这就是无限滚动，方法有很多

**
1、楼上提供的是复制li的方法，这种方法适合单向滚动，如果是个幻灯片要往前往后双向，复制的方式不是很方便，而且操作DOM影响性能。
2、我这里提供另一种posiotn定位的方式：
可直接查看https://jsfiddle.net/o5oqsodg/

或者复制代码到自己那查看

<body>
    <p class="content">
        <ul class="list">
            <li>test1</li>
            <li>test2</li>
            <li>test3</li>
            <li>test4</li>
            <li>test5</li>
        </ul>
    </p>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    .content {
        position: relative;
        top: 100px;
        left: 100px;
        height: 30px;
        width: 100px;
        overflow: hidden;
        text-align: center;
        border: 4px solid #f55;
    }

    .content li {
        position: relative;
        list-style-type: none;
        width: 100px;
        height: 30px;
        line-height: 30px;
        background-color: #eee;
    }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
    var ul = $('.list'),
        li = ul.children('li'),
        liHeight = li.height(), //取得单个li高度
        len = li.length;
    //取得li总数，注意li的index是从0开始的，所以len也就相当于最后一个li的index+1
    ul.height(len * liHeight + 'px'); //动态设置ul总高度

    var index = 0; //索引
    var timer; //定时器
    $('.content').on({
        mouseenter: function() {
            clearInterval(timer); //鼠标悬停在信息上时停止滚动
        },
        mouseleave: function() {
            timer = setInterval(play, 1000); //鼠标移开继续滚动
        }
    }).trigger('mouseleave'); //默认的定时器初始启动

    function play() { //滚动动画函数
        index++;
        if (index === len) { // 当滚动到最后一个li+1时
            li.first().css('top', len * liHeight); //把第一个li拉下来放在最后
        }
        ul.animate({
                'marginTop': -index * liHeight + 'px'
            },
            500,
            function() { //回调函数，每次滚动后执行
                if (index === len) { //index为len时（即滚动到了最后被拉下来的li时）
                    index = 0; //index复原
                    ul.css('marginTop', 0); //ul复原
                    li.first().css('top', 0); //第一个li回到原位
                };
            });
    }
    </script>
</body>

赞 +0

添加回复

ringa_lee2017-04-11 09:06:10 3楼

css:

    * {
        padding: 0;
        margin: 0;
    }
    
    .content {
        position: relative;
        background-color: red;
        height: 40px;
        width: 300px;
        margin: 0 auto;
        overflow: hidden;//遮罩层，你也可以注释掉，看是怎么运行的
    }
    
    ul {
        position: absolute;
        top: 0;
        width: 100%;
        overflow: hidden;//清除浮动，不然ul会没有高度。不设置高度，由子盒子撑开高度，好处是方便拓展
    }
    
    li {
        height: 40px;
        line-height: 40px;
        list-style: none;
    }

html：在ul后面加一条li

    <p class="content">
        <ul class="list"> 
            <li>test1</li>
            <li>test2</li>
            <li>test3</li>
            <li>test1</li>
        </ul>
    </p>

js:

var lih = $('.content').height();
var i = 1;
setInterval(function() {
    //当跳到最后一条时，让top瞬间变为0，对于人眼很难看的出来的，这样就实现了无限的滚动
    if (i >= 4) {
         i = 1
         $('.list').css('top',0);
    };
    $('.list').animate({top:-lih*i});
    i++;
}, 2000)

原理：