0

フェードインとフェードアウトのトランジションがあるスライダーがあります。基本的に、要素を循環して切り替え、アクティブなスライドにクラスを<li></li>追加します。.currentこのように見えます <li class="current"></li>

私のコードの解決策は何だと思いますか? http://jsbin.com/evayaw/

スライドにクラス()を追加するボタンを追加して.active、スライダーの動作を模倣しました。各スライド内のオブジェクト.activeは、親<li>コンテナにクラスを追加するとアニメーション化されます。.activeまた、クラスを削除した後、遷移する必要があります。遷移は通常、反対のプロパティを実行します。からまたはにopacity: 1;行きます。opacity 0;left: 100;left: 0;

同様: http ://tympanus.net/Development/ParallaxContentSlider/-これは既存のスライダーとは異なるアプローチを使用しているため、これを使用することはできません。

4

1 に答える 1

0

http://jsbin.com/evayaw/35

2、3、2の順にクリックした場合、それはあなたが望むものですか?問題の一部は、.activeを削除すると、.activeがなくなることでしたz-index:9999;.unActive(も追加z-index:9998;し、`.delay'も追加しました。

また、ページの先頭に移動し続けたhrefタグを使用して、それらを削除しました。(デフォルトの動作を停止させることもできたと思いますが、aプロパティをに入れ、マウスポインタ属性liも指定しましliた。クリックにもnth_of_type()を使用させますが、それを削除することもできます。ボタンがないことを確認するのに役立ちました。問題ありません。

編集:.object_#アニメーションを置く代わりに「反転」させたい場合も.unActive .object_#

于 2012-06-15T13:40:43.263 に答える