数か月前に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がありますが、さらに追加できるようにする必要があります。
これが要求のリストのように聞こえる場合は申し訳ありませんが、私はしばらくの間それを経験していて、運がありません。
助けることができる人に感謝します:)