質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

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

soramaru
soramaru

総合スコア23

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

2回答

0評価

1クリップ

466閲覧

投稿2022/01/27 04:54

編集2022/01/30 07:08

トップ部分に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,'MS Pゴシック',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; }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。