添加上一页下一个导航到列表项淡入/淡出循环

Adding prev next navigation to list items fade in/out loop

本文关键字：淡入 淡出 循环 列表 一页 下一个 导航 添加      更新时间：2023-09-26

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

.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/

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

尝试以下方法使其更通用：

 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

演示

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

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

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

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