Question

我有一个LI的列表，通过javascript / jquery向上进入视图。它可以正常工作，当它将第一个li附加到结尾时，它会使它保持可见。我尝试从我的javascript中删除slideDown（），但之后它没有显示，滚动浏览10个项目后（可能会有更多或更少）它停止。我有CSS只显示前五个LI的开始很好。

如何让LI向上滚动，移除第一个并将其隐藏在底部，以便我连续旋转LI元素？一旦我开始工作，它就会成为一个滚动的新闻源。

<style>
#news {
    width: 50%;
    margin: 0px;
    pading:0px;
    list-style:none;
    cursor: pointer;
    border: 1px solid red;
    overflow: hidden;
}
#news .item {
    border-width: 1px;
    border-style: solid;
}
#news .item h2 {
    color: white;
    font-size: 100%;
    white-space: nowrap;
    position: relative;
    border-color: inherit;
}
#news .item h2:after {
    content: '';
    display: inline-block;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent;
    border-left-color: inherit;
    vertical-align: middle;
    position: absolute;
    left: 100%;
}
#news .item h2,
#news .item div {
    display: table-cell;
    vertical-align: middle;
    padding: 0 1.5em;
}
.style1  { border-color: #697791 }
.style1 h2 { background: #697791 }
.style2  { border-color: #74936a }
.style2 h2 { background: #74936a }
.style3  { border-color: #dbbb06 }
.style3 h2 { background: #dbbb06 }
.style4  { border-color: #9C2528 }
.style4 h2 { background: #9C2528 }


#news li:nth-child(n+6) {
    display: none;
}
</style>

<script type="text/javascript">
    var seconds = 2    * 1000;

    function tick2(){
        $('#news li:first').slideUp("slow", function () { $(this).appendTo($('#news')).slideDown("slow"); });
    }
    var timer = setInterval(function(){ tick2 () }, seconds);
    $(document).ready(function() {
        $('#news').hover(function(ev){
            clearInterval(timer);
        }, function(ev){
            timer = setInterval( function(){ tick2() } , seconds);
        });
    });

    </script>

<ul id="news">
   <li><div class="item style1">
        <h2>1</h2>
        <div>
            <p>fdsasdf asdif ksd jfkasjdfasj dfla sjdflj asdfljas dflkjsdf alskdjf asdfl fdsasdf asdif ksd jfkasjdfasj dfla sjdflj asdfljas dflkjsdf alskdjf asdfl fdsasdf asdif ksd jfkasjdfasj dfla sjdflj asdfljas dflkjsdf alskdjf asdfl fdsasdf asdif ksd jfkasjdfasj dfla sjdflj asdfljas dflkjsdf alskdjf asdfl fdsasdf asdif ksd jfkasjdfasj dfla sjdflj asdfljas dflkjsdf alskdjf asdfl</p>
        </div>
</div></li>
    <li><div class="item style2">
        <h2>2</h2>
        <div>
            <p>fareveae vasev</p>
        </div>
    </div></li>
    <li><div class="item style2">
        <h2>3</h2>
        <div>
            <p>fareveae vasev</p>
        </div>
    </div></li>
    <li><div class="item style2">
        <h2>4</h2>
        <div>
            <p>fareveae vasev</p>
        </div>
    </div></li>
    <li><div class="item style2">
        <h2>5</h2>
        <div>
            <p>fareveae vasev</p>
        </div>
    </div></li>
    <li><div class="item style2">
        <h2>6</h2>
        <div>
            <p>fareveae vasev</p>
        </div>
    </div></li>
    <li><div class="item style3">
        <h2>7</h2>
        <div>
            <p>fareveae vasev</p>
        </div>
    </div></li>
    <li><div class="item style2">
        <h2>8</h2>
        <div>
            <p>fareveae vasev</p>
        </div>
    </div></li>
    <li><div class="item style4">
        <h2>9</h2>
        <div>
            <p>I'd love them to!!!</p>
        </div>
    </div></li>
    <li><div class="item style3">
        <h2>10</h2>
        <div>
            <p>I love &hearts; testing!!!</p>
        </div>
    </div></li>


</ul>

编辑：我创建了一个小提示，以显示https://jsfiddle.net/0bfuqq7z/

上发生了什么

Answer 1

您可以使用appendTo函数在<ul>元素中添加项目，或使用after函数在最后<li>项之后添加元素，因为我在这里显示我基本上将一个空白列表项添加到最后，隐藏它，然后将第一个元素复制到隐藏的最后一个元素，然后在两个元素上执行幻灯片动画，然后删除第一个项目以完成序列。

function tick2(){
    $('#news li:last').after("<li>&nbsp;</li>");
    $('#news li:last').hide();
    $('#news li:last').html($('#news li:first').html());
    $('#news li:first').slideUp("slow", function(){
        $('#news li:first').remove();
    });
    $('#news li:last').slideDown("slow");        
}

在追加后滚动LI不会隐藏

1 个答案: