0

次のようなcss3アニメーションで作成されたスライドショーがあります。

@-keyframes animBanner
{
0% {top: 0px;}
18% {top: 0px;}
20% {top: -60px;}
38% {top: -60px;}
40% {top: -120px;}
58% {top: -120px;}
60% {top: -180px;}
78% {top: -180px;}
80% {top: -240px;}
98% {top: -240px;}
100% {top: 0px;}
}

コントロールを追加したいので、必要な写真に移動できます。

次のような単純な JavaScript を使用して遷移イベントをトリガーできます。

var p=document.getElementById('elemId');
p.style.left= '50%';

しかし、アニメーションでは機能しません。これを機能させることは可能ですか、それともアニメーションに jquery を使用する必要がありますか?

4

1 に答える 1

1

Shmiddtyは正しかった。

このコードを使用してクラスを変更しました。

//Stop animation
var ad = document.getElementById('animBannerId');
ad.className="paused";
//Move the slide to the desired pic
anuncio.style.top = '160px';
//Etc.

そして私のcssにはトランジション用の次のコードがあります：

.paused
{
position: relative;
transition:top 1s;
-o-transition:top 1s;
-webkit-transition:top 1s;
-moz-transition:top 1s;
}

あなた、みんな、素晴らしいです。どうもありがとうございます。

ちなみに、アニメーションを再開するためのコードは追加していませんが、タイマーを作成することはできます

于 2012-11-09T18:53:21.573 に答える