1

スライダー プラグインを実装する代わりに、CSS/jquery を使用して DIV (フェードイン/フェードアウトまたはスライド効果) の背景画像を切り替えたいと思います。現在、私のコードは次のとおりです。

HTML

<div class="block backpic">
</div>

CSS

.block {

    display: block;
        margin-right: auto;
    margin-left: auto;
    clear: both;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    overflow: hidden;
}


.backpic {
    height: 638px;
    background-image: url(../images/picture1.jpg);
    background-size: cover;
}

画像 1 と 2 番目の画像を交互に表示するにはどうすればよいですか? 助けてくれて本当にありがとうございます

4

3 に答える 3

0

コアスライダークラスを持つ

.slider{
   opacity:1
   -webkit-transition:opacity 500ms;
   -moz-transition:opacity 500ms;
   -ms-transition:opacity 500ms;
   transition:opacity 500ms;
}

.hideSlide{
   opacity:0
}

これにより、不透明度が薄くなります。次に、スライドを非表示にするクラスで不透明度を変更し、透明な場合は背景画像を変更できます。次に、非表示スライド クラスを削除すると、フェードインします。

あるいは、500 ミリ秒、1000 ミリ秒、1500 ミリ秒などの長さの増加でフェードアウトする div の束を互いの上に配置して、それらを視聴者に公開することもできます。

于 2013-09-29T21:45:35.940 に答える
0

偶数セレクターと奇数セレクターを使用してみてください

    .block:nth-child(odd) {
background-image:
 height: 638px;
    background-image: url(../images/picture1.jpg);
    background-size: cover;
}

.block:nth-child(even) {
background-image:
 height: 638px;
    background-image: url(../images/pictureNew.jpg);
    background-size: cover;
}
于 2013-09-29T21:19:48.353 に答える