jquery自动旋转无序列表

我对jquery相当新，但我想要做的是自动旋转列表项。例如，我有下面的无序列表。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(); 
     }); 
    }); 
    }); 
});

来源

2011-03-10 seun87

好像你正在尝试模仿内容轮播。如果是这样，看看jCarousel。它会做你刚才所要求的。 – FarligOpptreden 2011-03-10 10:32:19

这个例子保持旋转无需点击任何元素上的注释。

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/

来源

2011-03-10 11:00:58

非常好 – seun87 2011-03-10 13:45:10

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

来源

2011-03-10 10:39:17

您可以将所有内容都包装在文档的“准备好”事件处理程序中，以获得一个漂亮干净的解决方案。我稍微修改了你的jsFiddle来说明：http://jsfiddle.net/8ydLU/1/ – FarligOpptreden 2011-03-10 10:48:35

是的，稍微好一点。感谢您的改进。 – 2011-03-10 10:51:36

和@FarligOpptreden，这正是我需要的。谢谢！！！！ – seun87 2011-03-10 11:12:40

它可以使用jQuery的一行来完成...

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

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

来源

2014-09-20 19:40:37 roneo

jquery自动旋转无序列表

回答

相关问题