jquery.bgSwitcherのエラーについて

jqueryの.bgSwitcherのエラーについてです。

ちゃんとお手本のコード通りにやったのですが、
なぜかエラーとして認知されます。

どのようにすればエラーを直すことができますか。

js
1$(function(){
2  $('header').bgSwitcher({
3    images: ['image/header-sky.png','image/masuda.JPG','image/tuwano.jpg'] 
4});
5
6  const headerItem = $('.nav-top');
7  if (headerItem.length) { //$('.nav-top');が存在したら処理
8    //固定する要素の指定
9    //navの位置
10    let headerTop = headerItem.offset().top;
11    //スクロールするたびに実行
12    $(window).on('scroll',function () {
13        //スクロール位置
14        var scrollPos = $(this).scrollTop();
15        //スクロール位置がnavの位置より下だったらクラスfixedを追加
16        if (scrollPos >= headerTop) {
17          headerItem.addClass('fixed');
18        } else {
19          headerItem.removeClass('fixed');
20        }
21    });
22  }
23
24  var window_h = $(window).height();
25  $(window).on("scroll", function() {
26    var scroll_top = $(window).scrollTop();
27    $(".company-wrappers").each(function() {
28      var elem_pos = $(this).offset().top;　
29      if (scroll_top >= elem_pos - window_h+200) {
30        $(this).addClass("fadein");
31      } else {
32        $(this).removeClass("fadein");
33      }
34    });
35  });
36
37  $('.green1 a').hover(
38    function() {
39      $('.green1 a').animate({
40        'padding-left':'154px'
41      },500)
42    },
43    function() {
44      $('.green1 a').animate({
45        'padding-left':'0'
46      },500)
47    }
48  );
49
50  $('.green3 a').hover(
51    function() {
52      $('.green3 a').animate({
53        'padding-left':'154px'
54      },500)
55    },
56    function() {
57      $('.green3 a').animate({
58        'padding-left':'0'
59      },500)
60    }
61  );
62
63  $('.green2 a').hover(
64    function() {
65      $('.green2 a').animate({
66        'padding-left':'154px'
67      },500)
68    },
69    function() {
70      $('.green2 a').animate({
71        'padding-left':'0'
72      },500)
73    }
74  );
75
76  var window_h = $(window).height();
77  $(window).on("scroll", function() {
78    var scroll_top = $(window).scrollTop();
79    $(".company-about").each(function() {
80      var elem_pos = $(this).offset().top;　
81      if (scroll_top >= elem_pos - window_h+200) {
82        $(this).addClass("fadeout");
83      } else {
84        $(this).removeClass("fadeout");
85      }
86    });
87  });
88
89  $('.fa-bars').click(function(){
90    $('.nav-top-sp').fadeIn();
91  });
92
93  $('.close').click(function(){
94    $('.nav-top-sp').fadeOut();
95  });
96
97  var nav = $('.header-2');
98  if (nav.length) { //$('.header-2');が存在したら処理
99    var navTop = nav.offset().top+500;
100    var navHeight = nav.height()+10;
101    var showFlag = false;
102    nav.css('top', -navHeight+'px');
103    $(window).scroll(function () {
104      var winTop = $(this).scrollTop();
105      if (winTop >= navTop) {
106          if (showFlag == false) {
107              showFlag = true;
108              nav
109                  .addClass('fixed')
110                  .stop().animate({'top' : '0px'}, 200);
111          }
112      } else if (winTop <= navTop) {
113        if (showFlag) {
114            showFlag = false;
115            nav.stop().animate({'top' : -navHeight+'px'}, 200, function(){
116                nav.removeClass('fixed');
117            });
118        }
119      }
120    });
121  }
122});

エラーメッセージ

Uncaught TypeError: $(...).bgSwitcher is not a function

実行ログ

Uncaught TypeError: $(...).bgSwitcher is not a function

at HTMLDocument.<anonymous> (script.js:2)
at j (jquery.js:3099)
at Object.fireWith [as resolveWith] (jquery.js:3211)
at Function.ready (jquery.js:3417)
at HTMLDocument.I (jquery.js:3433)

htmlファイル

html
1<header>
2        <div class="top-header">
3            <div class="header-icon">
4                <img src="image/company-icon.png" alt="会社のアイコン">
5                <p class="header-text">株式会社</p>
6                <p class="header-text2">エイエム建設<br class="sp-ber">コンサルタント</p>
7            </div>
8            <div class="tel-number">
9                <p>tel. 0852-24-8682</p>
10            </div>
11            <div class="menu-icon">
12                <p><a href="#"><i class="fas fa-bars"></i></a></p>
13            </div>
14        </div>
15
16        <div class="nav-top">
17            <ul>
18            <li><a class=”current” href=”#”>ホーム</a></li>
19            <li><a href=”#”>会社概要</a></li>
20            <li><a href=”#”>事業内容</a></li>
21            <li><a href=”#”>有資格者</a></li>
22            <li><a href=”#”>採用方法</a></li>
23            <li><a href="#">お問い合わせ</a></li>
24            </ul>
25        </div>
26
27        <div class="nav-top-sp">
28            <div class="close"><i class="far fa-window-close"></i></div>
29            <ul>
30            <li><a class=”current” href=”#”>ホーム</a></li>
31            <li><a href=”#”>会社概要</a></li>
32            <li><a href=”#”>事業内容</a></li>
33            <li><a href=”#”>有資格者</a></li>
34            <li><a href=”#”>採用方法</a></li>
35            <li><a href="#">お問い合わせ</a></li>
36            </ul>
37        </div>
38    </header>

css
1header {
2    height: 70vh; 
3    width: 100vw;
4    font-family: "Heisei Kaku Gothic Std";
5    position: relative;
6    -webkit-box-sizing: border-box;
7            box-sizing: border-box;
8            background-position: center center;
9            background-size: cover;
10  }
11
12.fadein2{
13    opacity:1;
14    left:0;
15}
16
17.header-icon{
18    background-color:white;
19    position:absolute;
20    top:0;
21    left:0;
22    padding: 1.25em 2.17em 1.5em;
23    color: rgb(22, 22, 22);
24    text-align: center;
25    width: 10.51rem;
26    height: 10.51rem;
27    letter-spacing:0.1px;
28    img{
29        text-align: center;
30        margin-bottom: 10px;
31    }
32    p{
33        margin-bottom: 0;
34    }
35}
36
37.header-text{
38    font-size:0.75rem;
39    font-weight: 500;
40    line-height:1.1875em;
41}
42
43.header-text2{
44    font-size:0.875rem;
45    font-weight: 700;
46    line-height:1.3125em;
47}
48
49.tel-number{
50    float:right;
51    font-size: 0.875rem;
52    font-weight: 700;
53    color: rgb(77, 77, 77);
54    letter-spacing:0.2em;
55    margin-top:2.0625em;
56    margin-right:3.75em ;
57}
58
59.menu-icon{
60    display:none;
61    font-size: 80px;
62    float: right;
63    margin-right: 10px;
64    a{
65        color:black;
66    }
67}
68
69/*ナビゲーションバー*/
70
71
72.nav-top{
73    text-align: center;
74    position:absolute;
75    background-color: rgba(41, 41, 41,0.4);
76    width: 100%;
77    bottom:0;
78    display:inline-block;
79    height: 85px;
80    line-height:85px;
81    z-index:10000;
82    }
83    .nav-top ul{
84    margin: 0 ;
85    padding: 0 ;
86    }
87    .nav-top ul li{
88    list-style: none;
89    display: inline-block;
90    width: 10%;
91    font-family: "Heisei Kaku Gothic Std";
92    font-size:0.875rem;
93    font-weight: 700;
94    letter-spacing:0.1em;
95    line-height:19px;
96    &:hover{
97        opacity:0.6;
98    }
99    }
100    .nav-top ul li a{
101    text-decoration: none;
102    display:inline;
103    color:rgb(255, 255, 255);
104    }
105
106
107    .nav-top-sp {
108        background-color: white;
109        display:none;
110        height:450px;
111        position: fixed;
112        width: 100%;
113        z-index:10000;
114        ul{
115            width: 90%;
116            margin: 0 auto;
117            margin-top: 20px;
118        }
119        li{
120            margin-bottom: 20px;
121        }
122        a{
123            color:black;
124            font-size:30px;
125            font-weight: 600;
126        }
127    }
128
129    .close{
130        float:right;
131        font-size:30px;
132        margin-right: 20px;
133    }

htmlのhead
1<head>
2    <meta charset="UTF-8">
3    <meta http-equiv="X-UA-Compatible" content="IE=edge">
4    <meta name="viewport" content="width=device-width, initial-scale=1.0">
5    <title>エイエム建設コンサルタント</title>
6    <link rel="stylesheet" href="https://use.typekit.net/hbd1ema.css">
7    <link rel="preconnect" href="https://fonts.gstatic.com">
8    <link rel="preconnect" href="https://fonts.gstatic.com">
9    <link href="https://fonts.googleapis.com/css2family=Noto+Sans+JP:wght@300&display=swap" rel="stylesheet">
10    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@900&display=swap" rel="stylesheet">
11    <link rel="stylesheet" href="https://use.typekit.net/hbd1ema.css">
12    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
13    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
14    <link rel="stylesheet" href="style.css">
15    <link rel="stylesheet" href="style.css.map">
16    <link rel="stylesheet" href="style.scss">
17    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
18    <script src="jquery.bgswitcher.js"></script>
19    <script>
20        (function(d) {
21          var config = {
22            kitId: 'fof6kzf',
23            scriptTimeout: 3000,
24            async: true
25          },
26          h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
27        })(document);
28      </script>
29</head>

データファイルの内容

Lhankor_Mhy

2021/03/05 02:44

エラーメッセージや実行ログをコピー&ペーストしましょう https://teratail.com/help/question-tips#questionTips3-4-2

ryouhei-inamoto

2021/03/05 03:03

了解しました。

Lhankor_Mhy

2021/03/05 03:17

bgSwitcher を読み込んでいる周辺のコードをご提示ください。

ryouhei-inamoto

2021/03/05 04:17

了解しました。

Lhankor_Mhy

2021/03/05 04:23

追記拝読。わかりにくくて申し訳ないですが、bgSwitcher.jsを読み込んでいる周辺のコードが見たいのです。（bgSwitcherの読み込みにトラブルが起きているのではないか、と疑っています）

ryouhei-inamoto

2021/03/05 05:02

了解しました。

Lhankor_Mhy

2021/03/05 05:18

なんか、おかしいですね。エラーメッセージか、最後のHTMLか、どちらかが実際のものと違いませんか？

Lhankor_Mhy

2021/03/05 05:21 編集

ああ、そうか、なるほど。最初のスクリプトは、jquery.js というファイルに書かれているのですか？

Lhankor_Mhy

2021/03/05 05:23

ん？いや、違うか。script.js に書かれているのか。やっぱりおかしいですね、エラーメッセージか、最後のHTMLか、どちらかが実際のものと違いませんか？

ryouhei-inamoto

2021/03/05 05:35

返信ありがとうございます。違いませんね。

Lhankor_Mhy

2021/03/05 05:36

すみません、やっぱり大丈夫でした。ご提示の範囲では問題なさそうです。 script.js はまた別の場所で読んでいるのですね？

Lhankor_Mhy

2021/03/05 05:41

ありそうなのは、jQuery を複数読み込んでしまっている、とかなのですが、拝見する限りでは1回しか読んでいないですね。あとは何が考えられるかなあ？

ryouhei-inamoto

2021/03/05 05:53

htmlファイルが2つありますが、その両方にjQueryのCDNを貼っております。

Lhankor_Mhy

2021/03/05 06:03

それは関係なさそうですね。現物を見ないとわからなさそうな……

ryouhei-inamoto

2021/03/05 06:05

かなり無茶ですが、すべてのファイルのコードをすべて表示してもよろしいでしょうか。

Lhankor_Mhy

2021/03/05 06:20

たぶん、文字数オーバーすると思いますが……　当方は構いません。

ryouhei-inamoto

2021/03/05 07:14

https://drive.google.com/file/d/1FVKiYLQ3uXS3mVZAN8JjDMhyky2sShDI/view?usp=sharing GoogleDriveに保存してある現物です。

ryouhei-inamoto

2021/03/05 07:15

見れますか？

Lhankor_Mhy

2021/03/05 07:20

拝見します。

Lhankor_Mhy

2021/03/05 07:23

いただいたコードではエラーが出ないんですが……どうしたものかな……

Lhankor_Mhy

2021/03/05 07:24

あ、recruit.html はエラー出ました。

Lhankor_Mhy

2021/03/05 07:25

原因わかりました。回答します。

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

回答1件

ベストアンサー

jquery.bgswitcher.js を読み込んでいないのが原因です。
JavaScript はページ単位で動作しますので、ライブラリを使用するページ毎すべてで読み込んでください。

投稿2021/03/05 07:26

Lhankor_Mhy

総合スコア36928

ryouhei-inamoto

2021/03/05 07:39

Lhankor_Mhyさんのおかげで、エラーが見事に消えました。本当にありがとうございます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

jquery.bgSwitcherのエラーについて

関連した質問