Question

我对jquery很新，但我想要做的是自动旋转列表项。例如，我在下面有以下无序列表。

    <ul> 
      <li>list 1</li> 
      <li>list 2</li>
      <li>list 3</li>
      <li>list 4</li>
   </ul>

目前，我有一个jquery函数可以旋转列表，但只有当用户点击列表项时，是否可以使用下面相同的代码旋转此列表，但它应该自动完成？没有用户，点击任何列表

$(function() {  
    $("li").click(function() {  
        var prev = $(this).prevAll();
    $.unique(prev).each(function(i) {
      $(this).delay(i*600).slideUp(function() {
        $(this).appendTo(this.parentNode).slideDown();
      });
    });
  });
});

Answer 1

此示例在不单击任何元素的情况下保持旋转。

function run() {
    var prev = $("#rotated li:first-child");
    $.unique(prev).each(function(i) {
      $(this).delay(i*600).slideUp(function() {
        $(this).appendTo(this.parentNode).slideDown();
      });
    });
}

window.setInterval(run,1000);

演示：http://jsfiddle.net/mSmbv/

Answer 2

http://jsfiddle.net/8ydLU/1

$(document).ready(function() {
    var swapLast = function() {
        $("ul li:last").slideUp('slow', function() {
            $(this).remove();
            $("ul").prepend($(this));
            $(this).slideDown('slow', function() {
                swapLast();
            });
        });
    }
    swapLast();
});

根据FarligOpptreden的评论更新

Answer 3

可以使用一行jquery来完成...

var swap = function() {
    $("ul li:last").hide().prependTo("ul").fadeIn(2000);
}
window.setInterval(swap,3000)

这是小提琴http://jsfiddle.net/q71ub2q7/

使用jquery自动旋转无序列表

3 个答案: