1

私のウェブページには4つの画像があります。CSS を使用して、ある画像から次の画像に無限ループでフェードします。「スライドショー」の方向を強制して、html で参照される最初の画像から開始し、4 番目の画像 (1 -> 2 -> 3 -> 4) に順次移動してから、最初に戻って無期限にループするようにします。 .

CSS で正しい順序を指定しようとすると、4 番目の画像が最初に表示され、最初からループに入る前に長い遅延が発生します。

画像を逆の順序で正しくループさせることしかできません。つまり、4,3,2,1 です。CSS3 をサポートしていないブラウザー用に jQuery Cycle Lite にフォールバックする予定があることと、Cycle Lite がマークアップで画像が参照されている順序でループすることを知っていること (1,2, 3、4など）。

私のコードは次のとおりです。

HTML

<div id="cf4a" class="shadow">
   <img alt="Image1" src="../Banners/Image1.png" />
   <img alt="Image2" src="../Banners/Image2.png" />
   <img alt="Image3" src="../Banners/Image3.png" />
   <img alt="Image4" src="../Banners/Image4.png" />
</div>

CSS

@-webkit-keyframes cf4FadeInOut {
   0% {opacity:1;}
   19% {opacity:1;}
   25% {opacity:0;}
   94% {opacity:0;}
   100% {opacity:1;}
}

@-moz-keyframes cf4FadeInOut {
   0% {opacity:1;}
   19% {opacity:1;}
   25% {opacity:0;}
   94% {opacity:0;}
   100% {opacity:1;}
}

@-o-keyframes cf4FadeInOut {
   0% {opacity:1;}
   19% {opacity:1;}
   25% {opacity:0;}
   94% {opacity:0;}
   100% {opacity:1;}
}

@keyframes cf4FadeInOut {
   0% {opacity:1;}
   19% {opacity:1;}
   25% {opacity:0;}
   94% {opacity:0;}
   100% {opacity:1;}
}

#cf4a {
   position:relative;
   height:350px;
   width:990px;
   margin:30px auto;
}

#cf4a img {
   position:absolute;
   left:0;
}

#cf4a img {
   -webkit-animation-name: cf4FadeInOut;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-duration: 32s;

   -moz-animation-name: cf4FadeInOut;
   -moz-animation-timing-function: ease-in-out;
   -moz-animation-iteration-count: infinite;
   -moz-animation-duration: 32s;

   -o-animation-name: cf4FadeInOut;
   -o-animation-timing-function: ease-in-out;
   -o-animation-iteration-count: infinite;
   -o-animation-duration: 32s;

   animation-name: cf4FadeInOut;
   animation-timing-function: ease-in-out;
   animation-iteration-count: infinite;
   animation-duration: 32s;
}

#cf4a img:nth-of-type(1) {
   -webkit-animation-delay: 0s;
   -moz-animation-delay: 0s;
   -o-animation-delay: 0s;
   animation-delay: 0s;
}

#cf4a img:nth-of-type(2) {
   -webkit-animation-delay: 8s;
   -moz-animation-delay: 8s;
   -o-animation-delay: 8s;
   animation-delay: 8s;
}

#cf4a img:nth-of-type(3) {
   -webkit-animation-delay: 16s;
   -moz-animation-delay: 16s;
   -o-animation-delay: 16s;
   animation-delay: 16s;
}

#cf4a img:nth-of-type(4) {
   -webkit-animation-delay: 24s;
   -moz-animation-delay: 24s;
   -o-animation-delay: 24s;
   animation-delay: 24s;
}

したがって、4 番目のスライドを 24 秒間表示せずにスライドショーを動作させる方法について誰かがアドバイスできる場合は、非常に感謝しています。

ありがとうございます。

レオン

4

1 に答える 1

1

あなたの場合、最も簡単なのはそれらを変更することですz-index

#cf4a img:nth-of-type(1) {
   -webkit-animation-delay: 0s;
   -moz-animation-delay: 0s;
   -o-animation-delay: 0s;
   animation-delay: 0s;

    z-index:4;
}

#cf4a img:nth-of-type(2) {
   -webkit-animation-delay: 8s;
   -moz-animation-delay: 8s;
   -o-animation-delay: 8s;
   animation-delay: 8s;

    z-index:3;
}

#cf4a img:nth-of-type(3) {
   -webkit-animation-delay: 16s;
   -moz-animation-delay: 16s;
   -o-animation-delay: 16s;
   animation-delay: 16s;

    z-index:2;
}

#cf4a img:nth-of-type(4) {
   -webkit-animation-delay: 24s;
   -moz-animation-delay: 24s;
   -o-animation-delay: 24s;
   animation-delay: 24s;

    z-index:1;
}

http://jsfiddle.net/gaby/ZUErm/のデモ

于 2012-12-29T13:32:32.697 に答える