jQueryスライダーを作成しようとしています。 各スライドには、スライドがアクティブなときにフェードインしなければならないさまざまな要素があり、次のスライドに行くときにフェードアウトする必要があります。jQueryのアニメーションスライダー
これまでのところ、スライドがフェードインしますが、問題はスライダをループさせることができないということです。
のjQueryコード:
function slider() {
$(".animate-circle-1").delay(1000).fadeIn(1000).delay(6000).fadeOut(1000).delay(12000).fadeIn(1000);
$(".animate-quote-0").delay(2000).fadeIn(1000).delay(2000).fadeOut(1000).delay(15000).fadeIn(1000);
$(".animate-person-1").delay(5000).fadeIn(1000).delay(2000).fadeOut(1000);
$(".animate-quote-1").delay(5000).fadeIn(1000).delay(2000).fadeOut(1000);
$(".animate-person-2").delay(9000).fadeIn(1000).delay(4000).fadeOut(1000);
$(".animate-circle-2").delay(10000).fadeIn(1000).delay(3000).fadeOut(1000);
$(".animate-quote-2").delay(11000).fadeIn(1000).delay(2000).fadeOut(1000);
$(".animate-person-3").delay(15000).fadeIn(1000).delay(4000).fadeOut(1000);
$(".animate-circle-3").delay(16000).fadeIn(1000).delay(3000).fadeOut(1000);
$(".animate-quote-3").delay(17000).fadeIn(1000).delay(2000).fadeOut(1000);
$(".slide-1").delay(8000).fadeOut(2000);
$(".slide-2").delay(8000).fadeIn(2000);
$(".slide-2").delay(6000).fadeOut(2000);
$(".slide-3").delay(6000).fadeIn(2000);
}
HTML:
<div class="header-wrapper">
<div class="slide slide-1">
</div>
<div class="slide slide-2">
</div>
<div class="slide slide-3">
</div>
<div class="header-wrapper-elements">
<div class="slide-container">
<div class="animate-quote animate-quote-0" style="display: none;">“It’s<br>
good<br>
to<br>
connect”</div>
<div class="animate-person animate-person-1" style="display: none;"></div>
<div class="animate-circle animate-circle-1" style="display: none;"></div>
<div class="animate-quote animate-quote-1" style="display: none;">Creëer<br>
betrokken-<br>
heid in de<br>
student<br>
levenscyclus</div>
<div class="animate-person animate-person-2" style="display: none;"></div>
<div class="animate-circle animate-circle-2" style="display: none;"></div>
<div class="animate-quote animate-quote-2" style="display: none;">bouw<br>
relaties om<br>
business te<br>
creëren</div>
<div class="animate-person animate-person-3" style="display: none;"></div>
<div class="animate-circle animate-circle-3" style="display: none;"></div>
<div class="animate-quote animate-quote-3" style="display: none;">Bied een<br>
unieke<br>
klant-<br>
ervaring</div>
</div>
</div>
誰かが良い解決策を知っていますか?