8

jQueryベースのコンテンツスライダープラグインを探しています。私はこのようなもの（その数が多すぎる）やjQueryUIスライダーを意味するものではありません。私が探しているものは、写真で最もよく説明できます。

特定の要素をビューポートからスライド（または遷移）して、その場所に新しい要素をスライドさせることができるjQueryプラグインはありますか？理想的には、いくつかの要素を次々にではなく、（一種の）シリーズのページに戻したり戻したりできるようにしたいと思います。線形速度でスライドさせるのではなく、これらの要素を緩和する機能は素晴らしいでしょう。

この写真は私が思いついた最高のビジュアルです：

ここに画像の説明を入力してください

以前にいくつか行ったように、プラグインを開発できることはわかっていますが、可能であれば、車輪の再発明は避けたいと思います。誰かがプラグインを提案できますか？

お時間をいただきありがとうございます。

4

1 に答える 1

4

CSS3 をサポートしている場合は、このようなことを試すことができますが、アニメーション クラスを作成する方がよいかもしれません。

.item:nth-child(1)
{
transition-timing-function            : ease-in-out;       
transition-property                    : left;
transition-duration                    : 0.1s;
transition-delay                    : 0.35s;
}

item:nth-child(2)
{
transition-timing-function            : ease-in-out;       
transition-property                    : left;
transition-duration                    : 0.1s;
transition-delay                    : 0.55s;
}

.item:nth-child(3)
{
transition-timing-function            : ease-in-out;       
transition-property                    : left;
transition-duration                    : 0.1s;
transition-delay                    : 0.65s;
}

.item:nth-child(4)
{
transition-timing-function            : ease-in-out;       
transition-property                    : left;
transition-duration                    : 0.1s;
transition-delay                    : 0.75s;
}​

jQuery を使用したい場合は、http://api.jquery.com/queue/である程度成功しています。これにより、より複雑な連鎖アニメーションを作成できます。子供の数が不明な場合は、この方法を使用できますslice()。

http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/にあるこの自己実行コードのスニペットを変更しました。

(function hidenext(jq){
jq.eq(0).fadeOut("fast", function(){
    (jq=jq.slice(1)).length && hidenext(jq);
});
 })($('div'))

使用するfadeOut必要はなく、自己実行する必要もありませんが、未知の数の要素に「遷移」を適用するためのきちんとした方法です。

これは、fadeOut http://jsfiddle.net/NpBfJ/を使用したフィドルです...これはおそらくあなたが望むよりも多くの作業です...:-)

スライダーに関しては、これは最高の無料のものの 1 つで、http://caroufredsel.dev7studios.com/には多くのカスタマイズ可能な機能があります。

于 2012-12-20T21:01:38.150 に答える