jquery - 使用jquery自动旋转无序列表

标签 jquery html-lists

我对 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();
      });
    });
  });
});

最佳答案

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

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/

关于jquery - 使用jquery自动旋转无序列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5258277/

相关文章:

javascript - 是否有一个 JQuery 插件可以让浏览器从当前位置平滑地向下滚动到 200 像素?

javascript - jQuery 使用 & 符号创建并打开 URL

jquery - 获取下一个元素,该元素不一定是同级且没有类

html - 将水平列表与另一个 div 对齐

javascript - 在 javascript 中正确引用 html 列表项对象以进行事件注册

css - 没有滚动条的可滚动 ul 元素

php - 在外部 URL 上注入(inject)时 jQuery AJAX 无法工作?

javascript - 在 chrome 中选择单击时更新选项

html - 具有 100% 宽度和边距的 float 列表

html-lists - ul li 显示内联 block 不水平显示