1

Anythingスライダー（https://github.com/ProLoser/AnythingSlider/wiki）を使用しており、訪問者が中央にフィルターされる次の画像と前の画像を表示できるように編集しました。この投稿の目的上、その中央のスライドは「アクティブ」スライドとして分類され、両側の画像は非アクティブとして分類されます。ここのコードを参照してください：http：//jsfiddle.net/JCQ6Q/7/

私がやろうとしているのは、CSSの不透明度を「非アクティブ」スライドに適用して、それらの画像が中央の「アクティブ」画像よりも見えにくくすることです。ユーザーが左矢印または右矢印をクリックして非アクティブな画像を中央にスライドさせるとき、中央の「アクティブな」画像を完全に表示したいと思います。その前の「アクティブな」画像は非アクティブになり、したがって見えにくくなります。等々...

とにかくこれを行うためにJavascriptまたはCSSを使用していますか？私は最高のコーダーではなく、CSSの方法を試しただけですが、さまざまなブラウザーの幅に適応するのに十分な柔軟性がありません。

4

2 に答える 2

2

以下を追加します。

.panel{ 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
  filter: alpha(opacity=50); /* IE 5-7 */
  opacity: 0.5; /* Other browsers */
}

.panel.activePage{ 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8 */
  filter: alpha(opacity=100); /* IE 5-7 */
  opacity: 1; /* Other browsers */
}

お役に立てれば。

于 2012-01-20T13:08:10.410 に答える
1

cssに次の行を追加します。

#slider .panel{
  opacity: 0.1;   
 }

 #slider .activePage{
   opacity: 1;   
  }
于 2012-01-20T13:00:50.887 に答える