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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

703閲覧

ナビゲーション・インジケーターをクリックしたら、フェードイン・フェードアウトされるようにしたい

satoru225Simple

総合スコア27

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/08/27 03:23

前提・実現したいこと

ナビゲーション・インジケーターをクリックしたら、現在の画像をフェードアウト・クリックされた際に紐づけられている画像をフェードインさせたいと思っておりますが以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

Uncaught ReferenceError: Index is not defined at goToSlide (main.js:41) at HTMLAnchorElement.<anonymous> (main.js:75)

該当のソースコード

html

1<div class="slideshow"> 2 <div class="slideshow-slides"> 3 <img src="https://placehold.jp/1600x485.png"> 4 <img src="https://placehold.jp/1600x485.png"> 5 <img src="https://placehold.jp/1600x485.png"> 6 <img src="https://placehold.jp/1600x485.png"> 7 </div> 8 9 <div class="slideshow-nav"> 10 <a href="#" class="prev">Prev</a> 11 <a href="#" class="next">Next</a> 12 </div> 13 <div class="slideshow-indicator"></div> 14 </div> 15

css

1@charset "UTF-8"; 2 3/* 4 * Slideshow 5 */ 6.slideshow { 7 overflow: hidden; 8 position: relative; 9 min-width: 960px; 10 height: 465px; 11} 12.slideshow img { 13 display: none; 14 position: absolute; 15 left: 50%; 16 margin-left: -800px; 17} 18 19.slideshow-nav a, 20.slideshow-indicator a { 21 background-color: rgba(0, 0, 0, 0); /* for IE9 */ 22 overflow: hidden; 23} 24.slideshow-nav a:before, 25.slideshow-indicator a:before { 26 content: url(../img/sprites.png); 27 display: inline-block; 28 font-size: 0; 29 line-height: 0; 30} 31 32.slideshow-nav a { 33 position: absolute; 34 top: 50%; 35 left: 50%; 36 width: 72px; 37 height: 72px; 38 margin-top: -36px; 39} 40.slideshow-nav a.prev { 41 margin-left: -480px; 42} 43.slideshow-nav a.prev:before { 44 margin-top: -20px; 45} 46.slideshow-nav a.next { 47 margin-left: 408px; 48} 49.slideshow-nav a.next:before { 50 margin-left: -80px; 51 margin-top: -20px; 52} 53.slideshow-nav a.disabled { 54 display: none; 55} 56 57.slideshow-indicator { 58 bottom: 30px; 59 height: 16px; 60 left: 0; 61 position: absolute; 62 right: 0; 63 text-align: center; 64} 65.slideshow-indicator a { 66 display: inline-block; 67 width: 16px; 68 height: 16px; 69 margin-left: 3px; 70 margin-right: 3px; 71} 72.slideshow-indicator a.active { 73 cursor: default; 74} 75.slideshow-indicator a:before { 76 margin-left: -110px; 77} 78.slideshow-indicator a.active:before { 79 margin-left: -130px; 80} 81 82 83/* JavsScript 無効時 */ 84.no-js .slideshow img:first-child { 85 display: inline; 86} 87

js

1$(function () { 2 3 /* 4 * Slideshow 5 */ 6 // slideshow クラスを持った要素ごとに処理を実行 7 $('.slideshow').each(function () { 8 9 var $container = $(this), 10 $slides = $container.find('img'), // すべてのスライド 11 $nav = $container.find('.slideshow-nav'), // d 12 $indicator = $container.find('.slideshow-indicator'), // e 13 14 15 slideCount = $slides.length, // スライドの点数 16 indicatorHTML = '', // インジケーターのコンテンツ 17 currentIndex = 0, // 現在のスライドのインデックス 18 duration = 500, // 次のスライドへのアニメーションの所要時間 19 easing = 'easeInOutExpo', // 次のスライドへのアニメーションのイージングの種類 20 interval = 7500, // 自動で次のスライドに移るまでの時間 21 timer; // タイマーの入れ物 22 23 // 各スライドの位置を決定し、 24 // 対応するインジケーターのアンカーを生成 25 $slides.each(function (i) { 26 indicatorHTML += '<a href="#">' + (i + 1) + '</a>'; 27 }); 28 29 // インジケーターにコンテンツを挿入 30 $indicator.html(indicatorHTML); 31 32 // 1 番目のスライドをフェードインで表示 33 $slides.eq(currentIndex).fadeIn(); 34 35 36 // 任意のスライドを表示する関数 37 function goToSlide (index) { 38 // 現在のスライドをフェードアウト 39 $slides.eq(currentIndex).fadeOut(); 40 // 次のスライドをフェードイン 41 $slides.eq(Index).fadeIn(); 42// 現在のスライドのインデックスを上書き 43 currentIndex = index; 44 // ナビゲーションとインジケーターの状態を更新 45 updateNav(); 46 } 47 48 // スライドの状態に応じてナビゲーションとインジケーターを更新する関数 49 function updateNav () { 50 var $navPrev = $nav.find('.prev'), // Prev (戻る) リンク 51 $navNext = $nav.find('.next'); // Next (進む) リンク 52 // もし最初のスライドなら Prev ナビゲーションを無効に 53 if (currentIndex === 0) { 54 $navPrev.addClass('disabled'); 55 } else { 56 $navPrev.removeClass('disabled'); 57 } 58 // もし最後のスライドなら Next ナビゲーションを無効に 59 if (currentIndex === slideCount - 1) { 60 $navNext.addClass('disabled'); 61 } else { 62 $navNext.removeClass('disabled'); 63 } 64 // 現在のスライドのインジケーターを無効に 65 $indicator.find('a').removeClass('active') 66 .eq(currentIndex).addClass('active'); 67 } 68// インベントの登録 69 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 70 71 // ナビゲーションのリンクがクリックされたら該当するスライドを表示 72 $nav.on('click', 'a', function (event) { 73 event.preventDefault(); 74 if ($(this).hasClass('prev')) { 75 goToSlide(currentIndex - 1); 76 } else { 77 goToSlide(currentIndex + 1); 78 } 79 }); 80 81 // インジケーターのリンクがクリックされたら該当するスライドを表示 82 $indicator.on('click', 'a', function (event) { 83 event.preventDefault(); 84 if (!$(this).hasClass('active')) { 85 goToSlide($(this).index()); 86 } 87 }); 88 89 }); 90 91}); 92

原因

js

1 function goToSlide (index) { 2 // 現在のスライドをフェードアウト 3 $slides.eq(currentIndex).fadeOut(); 4 // 次のスライドをフェードイン 5 $slides.eq(Index).fadeIn(); 6// 現在のスライドのインデックスを上書き 7 currentIndex = index; 8 // ナビゲーションとインジケーターの状態を更新 9 updateNav(); 10 }

上記の
$slides.eq(Index).fadeIn();
この部分でエラーが出ておりますが、
クリックしたナビorインジケーターの番号を
取得する方法が思いつきません。

ご助言いただけますと幸いです。
何卒宜しくお願い致します。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2019/08/27 03:25

とりあえず、typoでは? $slides.eq(Index).fadeIn(); ↓ $slides.eq(index).fadeIn();
satoru225Simple

2019/08/27 03:28

ありがとうございます! 確かに修正したら治りました。 恥ずかしいミスです…
guest

回答2

0

goToSlide (index)

$slides.eq(Index).fadeIn();

大文字、小文字のブレがありますが大丈夫ですか?

投稿2019/08/27 03:27

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

satoru225Simple

2019/08/27 03:36

ご回答くださり、ありがとうございます。 こちら他の方にも同じご指摘をいただきまして、 無事解決いたしました。 こういった記述ミスも気をつけてみるように します。 ありがとうございました。
guest

0

自己解決

Lhankor_Mhyさんの回答(質問への追記・修正の依頼)で、
$slides.eq(Index).fadeIn();
の.eq()内のindexが大文字になっていた
ことが原因でした。
正しくは
$slides.eq(index).fadeIn();

投稿2019/08/27 03:30

satoru225Simple

総合スコア27

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問