0

数か月前にjQueryを使用して小さなスライダーを作成し、それをリサイクルして新しいプロジェクトで使用しています。元々は画像をスライドさせていましたが、テキストをスライドさせるために必要です。jQueryは次のとおりです。

$(document).ready(function () {
var About = {
    init: function () {
        var text_spans = $('.headline-box span'),
            extracts = new Array(),
            delay = 5,
            current = 0;

        text_spans.each(function (index) {
            if ($(this).is(":visible")) {
                current = index;
            }
            extracts.push($(this));
        });

        var interval = setInterval(function () {

            target = (current < (extracts.length - 1)) ? current + 1 : 0;

            extracts[current].slideUp('slow');
            extracts[target].slideDown('slow');

            current = target;

        }, delay * 500);

    }
}

About.init();

});

ただし、現時点ではうまく機能していません。例えば:

  • 'sのループの終わりにspan達すると、最初のループに自動的に循環するのではなく、(コードに組み込まれている)遅延が発生しますspan
  • 同じクラス名などを使用して、ページに同じスライダーのインスタンスが2つあります。ただし、一度に実行されるのは1つだけです(つまり、1つはループで実行され、もう1つは開始されます)。
  • span'は、のdisplay: block;代わりにインラインCSSを持つ場合がありdisplay: inline;ます。通常、それはループの最初のものにのみ発生します。

少しコンテキストを与えるために、それは自動化されたニュースティッカータイプのものとして使用されることになっています。現時点spanでは、ループに3がありますが、さらに追加できるようにする必要があります。

これが要求のリストのように聞こえる場合は申し訳ありませんが、私はしばらくの間それを経験していて、運がありません。

助けることができる人に感謝します:)

4

0 に答える 0