3

<li>基本的にクリック時に要素の内容を表示するカスタム jquery サイクル プラグインを作成しようとしています。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>

J:

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

現在表示されている要素を追跡するためだけに、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 パラメーターを使用して、jQuery(...).data の代わりに Index/Size のクロージャーを使用できるように、両方のイベントに 1 つの関数のみを使用しました。

また、クロージャからいくつかの不要な変数を削除しました。

最後に、関数を呼び出すときに外部 DOM タグを誤って操作しないように、選択のコンテキストを絞り込みました。また、jQuery は DOM 全体をルックアップする必要がないため、実行速度も速くなります。

すべての要素ではなく、以前に表示された要素でのみ hide() を呼び出すことで、さらに最適化できます (Index の値から簡単に推測できます)。

于 2012-08-01T23:21:50.113 に答える
0

さて、私があなたを正しく理解しているなら、ここにあなたのための潜在的な解決策があります:

まず、setInterval は「バックグラウンド関数」であり、他の関数を実行している間にバックグラウンドで実行できます。最初にやりたいことは、setInterval メソッド内で行うことを独自の関数に移動することです。次に、その関数を呼び出すクリック イベント ハンドラーを作成します。その後、setInterval を呼び出すことができ、クリック イベント リスナーを実行すると同時に実行されます。

クリック リスナーの起動時に間隔が壊れるという問題が発生した場合は、クリック リスナーで関数を呼び出した後に間隔を再初期化することもできます。

さらにヘルプ/説明が必要な場合はお知らせください。

 

幸運を！:)

于 2012-08-01T22:42:17.660 に答える
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 に答える