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

我认为这将解决您的问题，您可以在这里看到它的工作原理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>

Js:

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

​

在黑暗中疯狂刺：

演示（我没有动上一个按钮，这取决于你）

代码（注意，我留下了一个部分供您完成）：

var ticker = $('ul.ticker');
ticker.children(':first').show().siblings().hide();
startTicker();
$('.prev, .next').bind('click', function() {
    if($(this).attr('class') == 'prev') {
        clearInterval(myInterval);
        /// for previous
        /// do it
        /// yourself
    } else {
        clearInterval(myInterval);
        ticker.find(':visible').fadeOut(function() {
            $(this).appendTo(ticker);
            ticker.children(':first').show();
            startTicker();
        });
    }
});
var myInterval;
function startTicker() {
    myInterval = setInterval(function() {
        ticker.find(':visible').fadeOut(function() {
            $(this).appendTo(ticker);
            ticker.children(':first').show();
        });
    },2000);
}

好的，如果我理解正确的话，这里有一个潜在的解决方案：

首先，setInterval是一个"后台函数"，因为它可以在后台运行，而您可以运行其他函数。首先要做的是将您在setInterval方法内部所做的事情移动到它自己的函数中。然后，您将创建一个点击事件处理程序，在其中调用该函数。之后，您可以调用setInterval，它将在您运行单击事件侦听器的同时运行。

如果您在单击侦听器触发时遇到间隔中断的问题，也可以在调用单击侦听器中的函数后重新初始化间隔。

如果你需要进一步的帮助/解释，请告诉我。

祝你好运！：）

看看这个jsFiddle

HTML

<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>
​

JS

var ticker = $('ul.ticker');
ticker.children(':first').show().siblings().hide();
function cycleFunc(direction) {
    ticker.find(':visible').fadeOut(function() {
        (direction == 'forward') ? $(this).appendTo(ticker) : $(this).prependTo(ticker);
        ticker.children((direction == 'forward') ? ':first' : ':last').show();
    })
}
var timer = setInterval(function() {
    cycleFunc('forward');
}, 2000);
$('.next, .prev').click(function() {
    clearInterval(timer)
    var direction = ($(this).hasClass('next')) ? 'forward' : 'backward';
    timer = setInterval(function() {
        cycleFunc(direction);
    }, 2000)
});​

删除DOM操作只是为了跟踪当前可见的元素。

我认为它们没有必要。我的2美分。

还让它看起来像是有人会实际使用的东西。

HTML:

<div id='Test'>
    <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>
</div>

JS:

jQuery.fn.Custom_cycler = function(Options){
    var Options = jQuery.extend({'Next': 'a.next', 'Previous': 'a.prev', 'List': 'ul.ticker'},Options||{});
    var List = jQuery(Options.List, this);
    var Index = 0;
    var Size = List.children().size();
    List.children().hide().first().show();
    var Move = function(Event){
        Event.preventDefault();
        if(Event.data)
        {
            Index++;
        }
        else
        {
            Index--;
        }
        Index=(Index+Size)%Size;
        jQuery(List.children().hide().get(Index)).show();
    };
    jQuery(Options.Next, this).bind('click', true, Move);
    jQuery(Options.Previous, this).bind('click', false, Move);
    return(this);
};

你这样使用它：

jQuery('div#Test').Custom_cycler();

EDIT：使用事件处理程序中的数据参数对两个事件只使用一个函数，这允许我对Index/Size使用闭包，而不是jQuery（…）.data.

还从闭包中删除了一些不必要的变量。

最后缩小了选择的上下文范围，以避免在调用函数时错误地操作外部DOM标记。它的执行速度也更快，因为jQuery不必查找整个DOM。

可以通过只对前面显示的元素而不是对所有元素调用hide（）来进一步优化（很容易从Index的值推断）。