前提・実現したいこと
ナビゲーション・インジケーターをクリックしたら、現在の画像をフェードアウト・クリックされた際に紐づけられている画像をフェードインさせたいと思っておりますが以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
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インジケーターの番号を
取得する方法が思いつきません。
ご助言いただけますと幸いです。
何卒宜しくお願い致します。
回答2件
あなたの回答
tips
プレビュー