0

簡単なスライダーを設計するためのチュートリアルに従っていましたが、いくつかのものを組み合わせることにしましたが、問題が発生しました。スライダーのチュートリアルでは、画像を左右にスライドさせるために変換を使用することになっていましたが、不透明度の値とスタック画像の変更を使用したかったので、変換を使用する必要がなく、不透明度での効果を滑らかにするためにトランジションを使用することもできます。変化する。divで次のことを達成しましたが、画像で同じプロセスを使用するのに問題があります。これは私がこれまでに達成したことです: http://jsfiddle.net/6nLx5/1/。画像 1、画像 2、画像 3、画像 4 のテキストをクリックした瞬間に遷移が発生するはずです。以下は、選択した画像の css です。

img_selected{
    z-index:+11;
    -webkit-opacity: 1.0;
    -moz-opacity: 1.0;
    opacity: 1.0;
    -webkit-transition: opacity 2s ease;
    -moz-transition: opacity 2s ease;
    -o-transition: opacity 12s ease;
    transition: opacity 2s ease;
}

次のコードは、スライダー内の選択されていない画像用です。

.slider-photos img {
    position: absolute;
    width: 1000px;
    height: 500px;
    padding: 0;
    margin: 0;
    -webkit-opacity: 0.0;
    -moz-opacity: 0.0;
    opacity: 0.0;
    z-index:+10;
    -webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -ms-transition: all 3s ease;
    -o-transition: all 3s ease;
    transition: all 3s ease;
}

クラスが切り替えられた時点で、jquery を使用したクラスのアクティブ化によって画像が表示されるようになっているため、画像の不透明度は 0 です。私が明確だったことを願っています。

4

1 に答える 1

0

具体性の問題です。img_selected は .slider-photos img よりも特異性が低いため、後者の不透明度が「勝者」です。

選択したプロパティで重要なことを追加して解決できます。

.img_selected {
    z-index:+11;
    opacity: 1 !important;

これはそれを解決するための一般的ではない方法ですが、それはより速くて簡単な方法です。より受け入れられる方法は、より具体的なセレクターを設定することです。

.slider-photos img.img_selected {
    opacity: 1;

更新されたフィドル

于 2013-03-10T22:14:18.170 に答える