0

画面から流れる LId の長いリストがあります。前へボタンと次へボタンをクリックすると、クリックした方向にスライドが移動するようにしたいと思います。できればループさせたいのですが、可能であればプラグインを避けたいです。

marginLeft の値をインクリメントする必要があることはわかっていますが、その方法がわかりません。どんな助けでも大歓迎です。ありがとう！

<ul>
   <li class="first selected team_one"></li>
   <li class="team_two"></li>
   <li class="team_three"></li>
   <li class="team_four"></li>
   <li class="last team_five"></li>
</ul>

$('.team .next').click(function(){
   $('.team ul li.first').animate({ marginLeft: '-157px' });
});

$('.team .prev').click(function(){              
   $('.team ul li.first').animate({ marginLeft: '0' });
});
4

1 に答える 1

0

アイデアは、overflow:hidden を使用した div で、隣り合った要素のリストであるということです。次に、左または余白などをアニメーション化して次の画像に移動します。私が使用するのは、動きをアニメーション化するための css3 トランジションです。

数秒の setTimeout() を使用して関数を実行し、内部でマージンまたは左をインクリメントします (pmandell のコメントとして)。インクリメントの後、関数を再度呼び出し、if のような if ステートメントを先頭に配置できます。 left または margin が x よりも大きい場合は、インクリメントの代わりに初期値を再度設定します。ブール値を定義し、そのブール値が変化したときにアニメーションを停止することもできます。カウンターなどです。

お役に立てば幸いです。

于 2012-11-07T16:56:51.477 に答える