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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

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

Q&A

1回答

1627閲覧

ナビゲーション・インジケーターをクリックしたらフェードインするようにしたい。

satoru225Simple

総合スコア27

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

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

0グッド

0クリップ

投稿2019/07/16 03:53

編集2022/01/12 10:55

実現したいこと

自動によるカルーセルスライダー(フェードイン・フェードアウト)+ナビゲーション・インジケーターをクリックしたら
自動と同じ動きをさせたいと思っておりますが、
実際にはナビゲーションとインジケーターが
うまく動いてくれません。

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

特にエラーなどは出ておりませんが、
ナビゲーションとインジケーターが
うまく動かない状態です。

該当のソースコード

html

1<!DOCTYPE html> 2<html class="no-js" lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<meta http-equiv="X-UA-Compatible" content="IE=edge"> 6<title>Chapter 05-02 &#xB7; jQuery 最高の教科書</title> 7<link rel="stylesheet" href="./css/normalize.css"> 8<link rel="stylesheet" href="./css/main.css"> 9<script src="./js/vendor/modernizr.custom.min.js"></script> 10<script src="./js/vendor/jquery-1.10.2.min.js"></script> 11<script src="./js/vendor/jquery-ui-1.10.3.custom.min.js"></script> 12<script src="./js/main.js"></script> 13</head> 14<body> 15 16<div class="slideshow"> 17 <div class="slideshow-slides"> 18 <a href="./" class="slide" id="slide-1"><img src="http://placeimg.com/320/240/any?dummy=1" alt="" width="1600" height="465"></a> 19 <a href="./" class="slide" id="slide-2"><img src="http://placeimg.com/320/240/any?dummy=2" alt="" width="1600" height="465"></a> 20 <a href="./" class="slide" id="slide-3"><img src="http://placeimg.com/320/240/any?dummy=3" alt="" width="1600" height="465"></a> 21 <a href="./" class="slide" id="slide-4"><img src="http://placeimg.com/320/240/any?dummy=4" alt="" width="1600" height="465"></a> 22 </div> 23 <div class="slideshow-nav"> 24 <a href="#" class="prev">Prev</a> 25 <a href="#" class="next">Next</a> 26 </div> 27 <div class="slideshow-indicator"></div> 28</div> 29 30</body> 31</html> 32

css

1@charset "UTF-8"; 2 3/* 4 * Slideshow 5 */ 6 7.slideshow { 8 background-color: rgb(0, 0, 0); 9 height: 465px; 10 min-width: 960px; 11 overflow: hidden; 12 position: relative; 13} 14 15.slideshow-slides { 16 height: 100%; 17 position: absolute; 18 width: 100%; 19 /* left は JavaScript で指定 */ 20} 21.slideshow-slides .slide { 22 height: 100%; 23 overflow: hidden; 24 position: absolute; 25 width: 100%; 26 /* left は JavaScript で指定 */ 27} 28.slideshow-slides .slide img { 29display: none; 30 position: absolute; 31} 32 33.slideshow-nav a, 34.slideshow-indicator a { 35 background-color: rgba(0, 0, 0, 0); /* for IE9 */ 36 overflow: hidden; 37} 38.slideshow-nav a:before, 39.slideshow-indicator a:before { 40 content: url(../img/sprites.png); 41 display: inline-block; 42 font-size: 0; 43 line-height: 0; 44} 45 46.slideshow-nav a { 47 position: absolute; 48 top: 50%; 49 left: 50%; 50 width: 72px; 51 height: 72px; 52 margin-top: -36px; 53} 54.slideshow-nav a.prev { 55 margin-left: -480px; 56} 57.slideshow-nav a.prev:before { 58 margin-top: -20px; 59} 60.slideshow-nav a.next { 61 margin-left: 408px; 62} 63.slideshow-nav a.next:before { 64 margin-left: -80px; 65 margin-top: -20px; 66} 67.slideshow-nav a.disabled { 68 display: none; 69} 70 71.slideshow-indicator { 72 bottom: 30px; 73 height: 16px; 74 left: 0; 75 position: absolute; 76 right: 0; 77 text-align: center; 78} 79.slideshow-indicator a { 80 display: inline-block; 81 width: 16px; 82 height: 16px; 83 margin-left: 3px; 84 margin-right: 3px; 85} 86.slideshow-indicator a.active { 87 cursor: default; 88} 89.slideshow-indicator a:before { 90 margin-left: -110px; 91} 92.slideshow-indicator a.active:before { 93 margin-left: -130px; 94} 95 96/* JavsScript 無効時 */ 97.no-js .slideshow { 98 height: auto; 99} 100.no-js .slideshow-slides { 101 height: auto; 102 position: static; 103} 104.no-js .slideshow-slides .slide { 105 display: block; 106 height: auto; 107 position: static; 108} 109.no-js .slideshow-slides .slide img { 110 margin: auto; 111 position: static; 112} 113.no-js .slideshow-nav, 114.no-js .slideshow-indicator { 115 display: none; 116} 117 118

js

1$(function () { 2 3 /* 4 * Slideshow 5 */ 6 $('.slideshow').each(function () { 7 8 // 変数の準備 9 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 10 11 var $container = $(this), // a 12 $slideGroup = $container.find('.slideshow-slides'), // b 13 $slides = $slideGroup.find('.slide'), // c 14 $nav = $container.find('.slideshow-nav'), // d 15 $indicator = $container.find('.slideshow-indicator'), // e 16 // スライドショー内の各要素の jQuery オブジェクト 17 // a スライドショー全体のコンテナー 18 // b 全スライドのまとまり (スライドグループ) 19 // c 各スライド 20 // d ナビゲーション (Prev/Next) 21 // e インジケーター (ドット) 22 23 slideCount = $slides.length, // スライドの点数 24 indicatorHTML = '', // インジケーターのコンテンツ 25 currentIndex = 0, // 現在のスライドのインデックス 26 duration = 500, // 次のスライドへのアニメーションの所要時間 27 easing = 'easeInOutExpo', // 次のスライドへのアニメーションのイージングの種類 28 interval = 7500, // 自動で次のスライドに移るまでの時間 29 timer; // タイマーの入れ物 30 31 32 // HTML 要素の配置、生成、挿入 33 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 34 35 // 各スライドの位置を決定し、 36 // 対応するインジケーターのアンカーを生成 37 $slides.each(function (i) { 38 indicatorHTML += '<a href="#">' + (i + 1) + '</a>'; 39 }); 40 41 // インジケーターにコンテンツを挿入 42 $indicator.html(indicatorHTML); 43 44 45 // 関数の定義 46 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 47 48 // 任意のスライドを表示する関数 49 function goToSlide (index) { 50 51 $('.slideshow').each(function () { 52 53 var $slides = $(this).find('img'), // すべてのスライド 54 slideCount = $slides.length, // スライドの点数 55 currentIndex = 0; // 現在のスライドを示すインデックス 56 57 // 1 番目のスライドをフェードインで表示 58 $slides.eq(currentIndex).fadeIn(); 59 60 // 7500 ミリ秒ごとに showNextSlide 関数を実行 61 setInterval(showNextSlide, 7500); 62 63 // 次のスライドを表示する関数 64 function showNextSlide () { 65 66 // 次に表示するスライドのインデックス 67 // (もし最後のスライドなら最初に戻る) 68 var nextIndex = (currentIndex + 1) % slideCount; 69 70 // 現在のスライドをフェードアウト 71 $slides.eq(currentIndex).fadeOut(); 72 73 // 次のスライドをフェードイン 74 $slides.eq(nextIndex).fadeIn(); 75 76 // 現在のスライドのインデックスを更新 77 currentIndex = nextIndex; 78 } 79 80 }); 81 82 // ナビゲーションとインジケーターの状態を更新 83 updateNav(); 84 } 85 86 // スライドの状態に応じてナビゲーションとインジケーターを更新する関数 87 function updateNav () { 88 var $navPrev = $nav.find('.prev'), // Prev (戻る) リンク 89 $navNext = $nav.find('.next'); // Next (進む) リンク 90 // もし最初のスライドなら Prev ナビゲーションを無効に 91 if (currentIndex === 0) { 92 $navPrev.addClass('disabled'); 93 } else { 94 $navPrev.removeClass('disabled'); 95 } 96 // もし最後のスライドなら Next ナビゲーションを無効に 97 if (currentIndex === slideCount - 1) { 98 $navNext.addClass('disabled'); 99 } else { 100 $navNext.removeClass('disabled'); 101 } 102 // 現在のスライドのインジケーターを無効に 103 $indicator.find('a').removeClass('active') 104 .eq(currentIndex).addClass('active'); 105 } 106 107 // タイマーを開始する関数 108 function startTimer () { 109 // 変数 interval で設定した時間が経過するごとに処理を実行 110 timer = setInterval(function () { 111 // 現在のスライドのインデックスに応じて次に表示するスライドの決定 112 // もし最後のスライドなら最初のスライドへ 113 var nextIndex = (currentIndex + 1) % slideCount; 114 goToSlide(nextIndex); 115 }, interval); 116 } 117 118 // タイマーを停止る関数 119 function stopTimer () { 120 clearInterval(timer); 121 } 122 123 124 // インベントの登録 125 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 126 127 // ナビゲーションのリンクがクリックされたら該当するスライドを表示 128 $nav.on('click', 'a', function (event) { 129 event.preventDefault(); 130 if ($(this).hasClass('prev')) { 131 goToSlide(currentIndex - 1); 132 } else { 133 goToSlide(currentIndex + 1); 134 } 135 }); 136 137 // インジケーターのリンクがクリックされたら該当するスライドを表示 138 $indicator.on('click', 'a', function (event) { 139 event.preventDefault(); 140 if (!$(this).hasClass('active')) { 141 goToSlide($(this).index()); 142 } 143 }); 144 145 // マウスが乗ったらタイマーを停止、はずれたら開始 146 $container.on({ 147 mouseenter: stopTimer, 148 mouseleave: startTimer 149 }); 150 151 152 // スライドショーの開始 153 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 154 155 // 最初のスライドを表示 156 goToSlide(currentIndex); 157 158 // タイマーをスタート 159 startTimer(); 160 161 }); 162 163}); 164

試したこと

元々は、左右にslideする形のjsを改造して、
フェードイン・フェードアウトの形にしております。

何卒宜しくお願い致します。

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

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

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

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

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

guest

回答1

0

showNextSlide関数に引数が書かれていないです。

投稿2019/07/16 11:28

yasutomi

総合スコア2937

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

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

satoru225Simple

2019/07/17 01:27

返信遅くなり申し訳ありません。 回答くださり、ありがとうございます。 まだ試せていないため、 できたら改めてご連絡いたします。 何卒宜しくお願い致します。
satoru225Simple

2019/07/17 01:43

申し訳ありません。 showNextSlide関数に引数がかかれていない とのことですが、いまいちどう書いていいかわからない状態です。 申し訳ございません、もし可能であれば、教えていただくことは可能でしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問