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

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

css

    *,div,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

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

    <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>

javascript

阅读 2.9k

4 个回答

已注销

✓ 已被采纳

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

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

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

<body>
    <div class="content">
        <ul class="list">
            <li>test1</li>
            <li>test2</li>
            <li>test3</li>
            <li>test4</li>
            <li>test5</li>
        </ul>
    </div>
    <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>

cheapskate

14611222

发布于
2016-11-20

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

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

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)

原理：
图片描述