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>

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

Answer 2

在黑暗中进行狂刺：

DEMONSTRATION（我离开了上一个按钮，这取决于你）

代码（通知我留下了一部分供你完成）：

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

Answer 3

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

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

如果在点击侦听器触发时遇到间隔被破坏的任何问题，您还可以在点击侦听器中调用该函数后重新初始化间隔。

如果您需要任何进一步的帮助/解释，请与我们联系。

祝你好运！：）

Answer 4

看看这个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)
});

Answer 5

删除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();

编辑：使用事件处理程序中的data参数仅对两个事件使用一个函数，这允许我使用闭包作为索引/大小而不是jQuery（...）。data。

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

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

可以通过仅对先前显示的元素而不是所有元素调用hide（）进一步优化（可以从Index的值中轻易推断）。

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

5 个答案: