2

jqueryを使用して、水平方向のliアイテムのリストをビューの内外にスライドさせるためのウィンドウとしてdivコンテナーを使用しています。

これは私がこれまでに持っているものです：http： //jsfiddle.net/TX5fJ/5/

8つのアイテムのリストを初期化し、divウィンドウ内でそれらを左右にスクロールできるようにします。また、リストの最後にアイテムを追加したり、リストの最初からアイテムを削除したりする機能もあります。

私がやろうとしていること：

1）リストの最後にアイテムを追加します（アイテムは表示されません）

2）リストを左にスクロールして、追加したばかりのアイテムを表示します（最初のアイテムが非表示になります）

3）リストの先頭からアイテムを削除します（不要になりました）

問題は、最初の項目を削除すると、リスト全体が左にシフトすることです。

最初のアイテムを削除しないと、機能するようです。（私のテスト関数を参照してください）

その解決策に関する私の懸念は、ulがすべての潜在的なアイテムを保持するのに十分な幅でなければならないということです。固定幅を指定しないと機能しません。

だから私はそれを99999px幅にして、テストボタンで現在の方法を使うことができると思います。

誰かが現在よりも良い実装についてのアイデアを持っていますか？

ありがとう。

4

1 に答える 1

3

list-itemを先頭から削除した後、リストのmargin-leftプロパティをリセットするだけで済みます。

function RemoveItem() {
    $('#slider-items li').first().remove();
    $('#slider-items').css('marginLeft', 0);
}

フィドルを更新しました。

于 2012-05-02T23:25:27.830 に答える