javascript - 带有 prev 和 next 的 jquery 自定义循环插件

Question

我正在尝试创建一个自定义 jquery 循环插件，它基本上显示 <li> 的内容点击后的元素。 html 如下:-

<ul class="ticker">
    <li>Boo1</li>
    <li>More boo1</li>
    <li>Even more boo</li>

    <a class="prev" href="#">previous</a>
    <a class="next" href="#">next</a>
</ul>​

所以当用户点击下一步按钮时，下一个<li>显示，当他单击上一个按钮时，上一个 <li>显示。

实现这一点从来都不容易 :( 我对 jquery 还是很陌生，所以请原谅。任何帮助的人

Answer 1

我认为这会解决你的问题，你可以在这里看到它的工作http://jsfiddle.net/KvscH/

<ul class="ticker">
    <li>Boo1</li>
    <li>More boo1</li>
    <li>Even more boo</li>
</ul>

<a class="prev" href="#">previous</a> -
<a class="next" href="#">next</a>

J:

var ticker = $('ul.ticker');
ticker.children(':first').show().siblings().hide();

setInterval(function() {
    ticker.find(':visible').fadeOut(function() {
        $(this).appendTo(ticker);
        ticker.children(':first').show();
    });
},50000); 

$('.next').live ('click', function () {
    ticker.find(':visible').fadeOut(function() {
        $(this).appendTo(ticker);
        ticker.children(':first').show();
    });
});

$('.prev').live ('click', function () {
    ticker.find(':visible').fadeOut(function() {
        ticker.find('li:last').insertBefore(ticker.find('li:first'));
        ticker.children(':first').show();
    });
});