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自動旋轉無序列表

回答

相關問題