🔰サイト制作勉強中　javascriptでwindowを開いた時に3秒ずつ4枚の背景が変わっていくものを作りたいです。

トップ部分に1980×1280サイズの背景画像を変化させていきたいのですが。
一枚目がフェイド出来ますが、他3枚が反映されていません。

やりたいことの例
リンク内容 https://linew.co.jp/
上記のトップ部分のようにしたいです。

具体的に、やりたい事としてWindows読み込み後、出現している背景を順にフェードアウト、次をフェードインさせる形で表現したいです。

現象として、画像が上にヘッダーがあり、画像が4枚並んでいるいて、上一枚目だけフェイドしていいます。
エラー表示はでていません。
知識をお借りしたいです。

コード
```<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>株式会社LiNew</title>
  <link rel="stylesheet" type="text/css" href="base.css">
  <link rel="stylesheet" type="text/css" href="">
  <script
  src="https://code.jquery.com/jquery-2.2.4.js"
  integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
  crossorigin="anonymous"></script> <script>
  (function(){
  let interval =3000;
  let fade_speed = 1000;
  $(".nav-totoggle img").hide();
  $(".nav-totoggle img:first").addClass("active").show();

  let changeImage = function(){
  		let $active = $(".nav-totoggle img.active");
  		let $next = $active.next(".nav-totoggle").length?$active.next(".nav-totoggle"):$(".nav-totoggle img:first");

  		$active.fadeOut(fade_speed).removeClass("active");
  		$next.fadeIn(fade_speed).addClass("active");
  }


  setInterval(changeImage,interval);
  }());
</script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
 <header>
   <div class="header-box">
     <div id="inner-header">
        <a href="#"><img src="image/logo_green.png"></a>
      <nav class="navglobal">
       <ul class="header-list">
        <li class="header-list">News</li>
        <li class="header-list">About</li>
        <li class="header-list">Serice</li>
        <li class="header-list">Recruit</li>
        <li class="header-list">Contact</li>
       </ul>
     </nav>
    </div>
   </div>
     <nav class="nav-totoggle">
          <img src="image/IMG_0218-4.jpeg">
          <img src="image/IMG_0224-1.jpeg">
          <img src="image/IMG_0256.jpeg">
          <img src="image/IMG_0258-1.jpeg">
     </nav>

</body>
</html>


以下CSS

@charset "UTF-8";
/* reset */
body, h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd, img, form, table, tr, th, td {
	margin: 0;
	padding: 0;
	border: none;
	font-style: normal;
	font-weight: normal;
	font-size: 100%;
	text-align: left;
	list-style-type: none;
	border-collapse: collapse;
}

textarea { font-size: 100%; vertical-align:middle;}
img { border-style: none; display: block; }
hr { display: none; }
em{font-style: normal}
input{line-height:auto;vertical-align:middle;}
strong.more{color:#c30}
a{text-decoration: none;}

html {

}

body {
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

/* 上の部分は気にせずここから書く */

html{
	background-color: #f5f5f5
}

header{
	width: 100%;
	height: 120px;
	background-color: #fff
}

.header-box{
	border:  red 2px solid;
	max-width: 1200px;
	margin: 0 auto;
	justify-content: space-between;
	padding-top:30px;
}

#inner-header{
	display: flex;
	justify-content: space-between;
	padding: 2px  2.5px;
	align-items: center;
	z-index: 100px;
}


.header-list{
	display: flex;
  max-width: 1200px;
}

.header-list li{
	justify-content: center;
	padding: 0 10px;
}

.fadein-header img{
	max-width: 100%;
	height: 1000px;
	margin: 0 auto;
	z-index: auto;
}

m.ts10806

2022/01/27 05:23

「うまくいかない」などで他者に伝わる情報量はゼロなので具体的に起きている現象を記載してください。 https://teratail.com/help/question-tips#questionTips34

soramaru

2022/01/27 05:37

修正依頼ありがとうございます。変更させ頂きました。

m.ts10806

2022/01/27 05:41

>出来ていませんどのような現象が起きていますか？エラーが出ていないかも確認してください（ブラウザの開発ツールから確認できます）

soramaru

2022/01/27 05:48

変更いたしました。確認お願いします。

m.ts10806

2022/01/27 05:50

なるほどただ、HTMLだけでは他者が再現できませんし、アドバイスも難しいです。何度も申し訳ないですがコピペで他者が再現できる程度にコードを提示してください。

soramaru

2022/01/27 06:09

ご鞭撻ありがとうございます。 css方も入れておきます。

m.ts10806

2022/01/27 06:22

ファイルが別ならコードブロックも分けてもらったほうが

Lhankor_Mhy

2022/01/27 08:00

マルチポスト https://ja.stackoverflow.com/questions/85969/ > teratailでは、マルチポスト※の推奨はしていません。 https://teratail.com/help#posted-otherservice > また、teratail上で誤って同じ質問を複数投稿してしまった場合は、質問の削除リクエストを送ってください。 https://teratail.com/help#posted-otherservice > 質問への回答とは、余程初歩的な問題でない限り、それなりに時間が必要となる行為である。より良い回答をしようと丁寧に調べ上げてから文章に推敲を重ねた上で回答してくれるユーザも少なくない。マルチポストはそんな回答者の親切心を裏切る行為である。 https://dic.nicovideo.jp/a/%E3%83%9E%E3%83%AB%E3%83%81%E3%83%9D%E3%82%B9%E3%83%88 > マルチポストだと指摘されました。どうすればいいですか？ > 質問文を編集して、マルチポストしていることを説明してください。 https://ja.meta.stackoverflow.com/questions/2418/ > また、マルチポストはマナー違反であるという意見については賛否両論である。 https://ja.wikipedia.org/?curid=46419

soramaru

2022/01/27 08:28

ご指摘ありがとうございます。撤回しておきます。

行動規範の内容に同意します

回答2件

ベストアンサー

手元で再現できるコードが提示されてないので、気になる点だけ。

  let element = document.getElementById('nav-totoggle1');
   $('nav-totoggle1').stop().fadein(3000);

html上はnav-totoggle1という名前の要素はありません。
また、jQueryのセレクタ指定で'nav-totoggle1'とすると「'nav-totoggle1'というタグ」を見に行きます。
HTMLを正直に見るならclassが振ってあるので$('.nav-totoggle1')になりますが、
そのページ内に１つしかないのならIDに変更したほうが良いかもしれません。

html
1       <li id="nav-totoggle1"><img src="image/IMG_0218-4.jpeg"></li>
2       <li id="nav-totoggle2"><img src="image/IMG_0224-1.jpeg"></li>
3       <li id="nav-totoggle3"><img src="image/IMG_0256.jpeg"></li>
4       <li id="nav-totoggle4"><img src="image/IMG_0258-1.jpeg"></li>
5

js
1$('#nav-totoggle1').stop().fadein(3000);

※base.cssに書いてある内容に影響する変更かもしれませんので、悪しからず

投稿2022/01/27 05:55

m.ts10806

総合スコア80850

soramaru

2022/01/27 06:14

ご回答ありがとうございます。やってみます。

soramaru

2022/01/27 06:19 編集

変更しましたが、変化ありませんでした。変更後のhtml貼っておきます。

m.ts10806

2022/01/27 06:29

fadein ↓ fadeIn （iじゃなくI 。大文字） https://api.jquery.com/fadein/ エラー出てるかもしれませんよ。ブラウザの開発ツール確認を。ただ、フェードインは非表示要素を徐々に表示させる機能なので、非表示にしてないと効果の程は見えないのでは？（stop()の意図が不明ですが） cssに下記のように入れてみてください（未検証。初期非表示にしたい） .nav-totoggle > li{ display:none; } あとliってマークアップ的にdiv配下に置けなかった気が（動作への影響があるかは微妙ですが）

soramaru

2022/01/27 06:36

畏まりました。

soramaru

2022/01/27 06:48 編集

また、行いたいことが分かりにくかったので変更しておきます。変更後、画像が消えてフェードインはしてこなかったです。上野説明の変更してきました。

soramaru

2022/01/29 22:08

解決いたしました。

行動規範の内容に同意します