Question

我有以下代码循环遍历列表项，使它们淡入/淡出，它可以工作，但我需要一些帮助添加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>

JQUERY

$(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/

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

Answer 1

您可以停止自动循环创建变量，例如var x = setInterval(changelist,1000);然后再调用clearInterval(x);

对于上一个和下一个控件，您可以将'next'单击设置为clearInterval，然后调用changeList（）函数。对于prev，你必须创建另一个函数，你从i中减去1并检查i === -1，将它设置为最后一项。

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

Answer 2

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

 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

<强> Demo

Answer 3

要停止循环，必须将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;
});

将prev next导航添加到列表项淡入/淡出循环

3 个答案: