3

我正在尝试创建一个自定义 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还是很陌生，所以请原谅。任何帮助家伙

4

5 回答 5

4

我认为这会解决你的问题，你可以在这里看到它工作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();
    });
});

​</p>

于 2012-08-01T22:40:29.107 回答
2

在黑暗中猛烈抨击：

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

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

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);
}
于 2012-08-01T22:47:35.610 回答
0

好的，如果我对您的理解正确，这是一个潜在的解决方案：

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

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

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

 

祝你好运！:)

于 2012-08-01T22:42:17.660 回答
0

删除 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 参数仅对两个事件使用一个函数，这允许我对 Index/Size 使用闭包而不是 jQuery(...).data。

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

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

可以通过仅在先前显示的元素而不是所有元素上调用 hide() 来进一步优化（很容易从 Index 的值推断）。

于 2012-08-01T23:21:50.113 回答
0

看看这个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)
});​
于 2012-08-01T22:54:58.760 回答