Question

我一直在互联网上试图找到一个简单的<li>旋转器，其功能与Twitter主页（热门推文）相同，然后才能登录。

我正在阅读一本JQuery书，但是旋转器不能满足我所需要的简单性......而且我是新手。

有谁知道如何实现这一点...我也遇到了JQuery的Cycle插件，但我真的很想了解幕后发生的事情。扩展我的知识

非常感谢任何帮助，谢谢

Answer 1

尝试这样的事情。

您的清单

<ul class="fadein">
    <li>element 1</li>
    <li> element 2 </li>
</ul>

设置li to display:none in css

编写一个简单的JQuery循环函数

$(function(){
fade();
});

function fade(){
$("ul.fadein > li:hidden:first").fadeIn("slow", function() {
setTimeout(fade, 1000);
});

您可以将淡入淡出时间设置为（“快速”）或更改setTimeout值＆gt;或者＆lt; 1000让它更快。

这是一个让你入门的工作example

希望这有帮助

Answer 2

不得不猜测“旋转器”的含义，但是：

var counter, list;

// Initial fill
list = $('#thelist');
for (counter = 0; counter < 5; ++counter) {
  $("<li>" + counter + "</li>").appendTo(list);
}

// Start rotating
setInterval(rotate, 1000);

// Rotator function
function rotate() {
  var list = $('#thelist');
  list.find("li:first").remove();
  $("<li>" + counter + "</li>").hide().appendTo(list).fadeIn();
  ++counter;
}

（Live example）如果您想从服务器获取新的li数据，则需要使用ajax，但除此之外基本想法是相同的。< / p>

你是如何使用JQuery编写一个非常简单的<li>旋转器的？</li>

2 个答案: