###前提・実現したいこと
複数枚の画像をクロスフェードさせたいと思い、色々な記事を参考に以下のように実装しました。
しかし実装して気づいたのですが、このコードの処理では、初回の画像の切り替わり開始まで6秒待機し、3秒かけて切り替えます。
そして、2回目以降に関しては、3秒待機して、3秒かけて切り替え、となります。
そうではなく、初回もそれ以降も、「3秒待機→3秒かけて切り替え」のように処理させたいのですが、何か良い方法はありますでしょうか?
ご回答を頂けると助かります。
(その他の記事もいろいろと参考にしたのですが、ほとんどがsetIntervalを用いて実装しているため、同じ現象が起こってしまいます…)
###該当のソースコード
javascript
1$(function(){ 2 var $width =800; // 横幅 3 var $height =400; // 高さ 4 var $interval = 6000; // 切り替わりの間隔(ミリ秒) 5 var $fade_speed = 3000; // フェード処理の早さ(ミリ秒) 6 $("#viewer ul li").css({"position":"relative","overflow":"hidden","width":$width,"height":$height}); 7 $("#viewer ul li").hide().css({"position":"absolute","top":0,"left":0}); 8 $("#viewer ul li:first").addClass("active").show(); 9 setInterval(function(){ 10 var $active = $("#viewer ul li.active"); 11 var $next = $active.next("li").length?$active.next("li"):$("#viewer ul li:first"); 12 $active.fadeOut($fade_speed).removeClass("active"); 13 $next.fadeIn($fade_speed).addClass("active"); 14 },$interval); 15 16}); 17
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/12 00:48