1

「次へ」の矢印と「前へ」の矢印をクリックするときに背景をスライドする必要があります - 現在、背景は #container 要素にあります - しかし、それはうまくいきません - 背景を ul#slider に入れてみましたelement - しかし、それもうまくいきません...

私が必要とするのは、背景がスライダーのli内側と同じくらいスライダーになることです...

それを行う方法に関する提案はありますか？

ここでプロジェクトを見ることができます: http://www.i-creative.dk/Slider/

どうも

4

2 に答える 2

0

私はあなたが求めているもののようなものを作りました、そしてそれは完全な苦痛です。

問題は、スライドごとに異なる背景画像、ページのサイズを使用することについて話していることです。

2つのオプションは次のとおりです。1：すべての背景を水平に揃えた1つの大きな背景画像を用意し、divを変更するときにcssのbackground-positionをアニメーション化して、一致を維持します。これは、ダウンロードする必要がある画像が1つだけであるという利点ですが、それは大きくなります。問題は次のとおりです。一度に複数のステップをジャンプすると、他のすべての画像が表示されます。

固定幅を使用する必要があります。

1つのスライドだけの背景を変更したい場合は、面倒です。

  1. 次のスライドの背景を、の兄弟であるcontainerがz-indexが高いdivにプリロードします。jqueryを使用して、これを既存の背景の上に適切な側からスライドさせます。この方法の良いところは、cssを使用して、背景画像が常に画面の全幅を占めるようにするか、より大きなイメージャを使用して中央に配置できることです。例については、http： //cksk.comを参照してください。

簡単に言えば、既成のソリューションではこれを機能させることはできません。手を汚す必要があります。

また、最適化に多くの時間を費やす必要があります。

于 2011-09-29T09:18:04.187 に答える
0

このcssを試してみてください...

#slider {
    width: 472px; /* divided the width of the background image by 4 (# of panels) */
    height: 570px;
    list-style: none;
    /* start background after the initial cloned panel: 472px to match panel width */
    background: transparent url(../images/background.png) 472px 0 repeat-x;
}

/* This makes sure the last cloned panel background matches the first panel */
ul#slider li.clone {
    background: transparent url(../images/background.png) 0 0 repeat-x !important;
}

/* Make the background visible */
div.anythingSlider .anythingWindow {
    overflow: visible !important;
}

唯一の問題は、UL の幅が制限されていることです。そのため、最後のパネルに到達すると背景が終了しますが、右矢印を押すと再び表示されます。

于 2011-09-29T21:17:57.483 に答える