Question

我试过这个：

<div id="wrapper">
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
</div>

$(document).ready(function() {
    function scroll() {
        $('#wrapper li:first').hide("slide", { direction: "up" }, function() {
            $(this).show().parent().append(this);
        });
    }
    setInterval(scroll, 2000);
});

但它并没有无缝地移动。例如，最后三个列表项不会开始滑动，直到顶部列表项消失为止。

除了控制我的setInterval而不是点击按钮之外，我想要完成此动作： http://buildinternet.s3.amazonaws.com/projects/totem/index.html

Answer 1

尝试这种方式

   $(document).ready(function() {
        function scroll() {
          var $li = $('#wrapper li');
          $li.eq(0).insertAfter($li.last())
        }
        setInterval(scroll, 2000);
      });

我想你会添加一个按钮来控制滑动动画，所以你只需要在那个按钮上添加onclick evnet就像下面的那样

 $(document).ready(function() {
        function scroll() {
          var $li = $('#wrapper li');
          $li.eq(0).insertAfter($li.last())
        }
        $('#btn').on('click',scroll);
  });

Answer 2

图腾jQuery插件已经使用间隔来控制滚动。如果您不想使用它们，可以将开始/停止按钮选项设置为null。默认情况下甚至为您完成：

$(function(){
    $('#wrapper').totemticker({
        speed:2000
    });
});

Answer 3

我想这就是你想要的：

$(document).ready(function() {
    function scroll() {
        $('#wrapper li:first').slideUp("slow", function() {
            $(this).show().parent().append(this);
        });
    }
    setInterval(scroll, 2000);
});

演示 https://jsfiddle.net/qz6takb4/

垂直滑动列表

3 个答案: