jQueryでの画像のクロスフェードに関して

###前提・実現したいこと
複数枚の画像をクロスフェードさせたいと思い、色々な記事を参考に以下のように実装しました。

しかし実装して気づいたのですが、このコードの処理では、初回の画像の切り替わり開始まで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件

ベストアンサー

こんにちは。

動作確認してないので、上手く動くか分かりませんが
以下のコードでどうでしょうか？
※認識違いがございましたら、すみません

$interval を 3000ミリ秒に変更
初回のみ setTimeout を使って 3000ミリ秒後に changeImage() を実行
↑以降は 3000ミリ秒単位で changeImage() を実行

javascript
1$(function(){
2  var $width =800; // 横幅
3  var $height =400; // 高さ
4  var $interval = 3000; // 切り替わりの間隔（ミリ秒）
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
10  setTimeout(function(){
11    function changeImage(){
12      var $active = $("#viewer ul li.active");
13      var $next = $active.next("li").length?$active.next("li"):$("#viewer ul li:first");
14      $active.fadeOut($fade_speed).removeClass("active");
15      $next.fadeIn($fade_speed).addClass("active");
16    }
17    changeImage();
18    setInterval(changeImage,$interval);
19  },$interval);
20
21});