0

リスト項目をループしてフェードイン/アウトさせる次のコードがありますが、機能しますが、コードを複製せずに前の次のナビゲーションを追加するのに助けが必要です。

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>

Jクエリ

$(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);その後の呼び出しなどの変数を作成して、自動ループを停止できますclearInterval(x);

前のコントロールと次のコントロールについては、「次の」クリックで clearInterval を設定してから、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 に答える