0

我有以下代码循环遍历列表项，使它们淡入/淡出，它可以工作，但我需要一些帮助来添加 prev next 导航而不复制任何代码。

HTML：

<ul id="site_slideshow_inner_text">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
</ul>

查询

$(function () {
    var list_slideshow = $("#site_slideshow_inner_text"),
        listItems = list_slideshow.children('li'),
        listLen = listItems.length,
        i = 0,
        changeList = function () {
            listItems.eq(i).fadeOut(300, function () {
                i += 1;
                if (i === listLen) {
                    i = 0;
                }
                listItems.eq(i).fadeIn(300);
            });
        };
    listItems.not(':first').hide();
    setInterval(changeList, 1000);
});

http://jsfiddle.net/Q6kp3/

任何帮助将不胜感激，谢谢。

4

3 回答 3

3

您可以在创建变量时停止自动循环，例如var x = setInterval(changelist,1000);Then later callclearInterval(x);

至于上一个和下一个控件，您可以设置“下一个”单击以清除间隔，然后调用 changeList() 函数。对于上一个，您将必须创建另一个函数，从 i 中减去 1 并检查 i === -1，将其设置为最后一项。

见这里：http: //jsfiddle.net/upPp4/1

于 2013-10-04T17:52:23.000 回答
3

尝试这种方式使其更通用：

 var 
        $listItems = $("#site_slideshow_inner_text").children('li'),
        fadeDuration = 300,
        interval;
    $listItems.not(':first').hide();

    function showSlide(elm) {
        //fadeout the visible one and fade in the element passed to the function
        $listItems.filter(':visible').fadeOut(fadeDuration, function () {
            elm.fadeIn(fadeDuration);
        });
    }

    function autoSlide() {
    //auto slide is set up to go forward
        interval = setInterval(function () {
            showSlide( getNextElement('next'));
        }, 1000);
    }

    $('#prev, #next').on('click', function () {
        stopAutoSlide(); //stop auto slide 
        showSlide(getNextElement(this.id)); //Get next element by passing in prev/next as argument which are the id of the element itself.
    });


    //Here is the major section that does all the magic of selection the element
    function getNextElement(direction) {
    //Here direction will be prev or next they are methods on jquery to select the element, so it will select correspoding element by executing that specific function i.e next() or prev(). 
     // Also set up a fallback if there is no element in  next or prev you need to go to last or first and execute it.
        var $next = $listItems.filter(':visible')[direction](), 
            fallBack = (direction === 'prev' ? 'last' : 'first');
        return !$next.length ? $listItems[fallBack]() : $next;

    }

    function stopAutoSlide() {
        $listItems.stop(true, true, true); //just clean up the animation queues
        clearInterval(interval); //clear the interval
    }

    autoSlide(); //Kick off auto slide

演示

于 2013-10-04T17:57:10.480 回答
2

要停止循环，您必须将 setInterval 分配给一个变量：

var myInt = setInterval(changeList, 1000);

然后使用 clearInterval 调用该句柄：

clearInterval(myInt);

然后，只需再次调用您的函数：

changeList();

所以你的按钮代码看起来像（未经测试）：

<input id="next" type="button" value=">">
<input id="prev" type="button" value="<">


$('#next').click(function() {
    clearInterval(myInt);
    changeList;
});
于 2013-10-04T17:47:23.847 回答