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

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

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

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

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

解決済

jqueryスライドショー表示されない

revoiot
revoiot

総合スコア188

HTML5

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

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

1回答

0リアクション

0クリップ

4896閲覧

投稿2017/03/25 02:10

最近購入した本「jQuery最高の教科書」に載っているスライドショーのプラグインを利用しようと、
自分に作っているwebsiteに利用したのですがうまく動作しませんでした。

不具合について、下記にある画像を見てもらえればわかると思いますが、背景の黒が表示されたままであり、画像が表示されません。

改善するためにしたこと
・コメント閉じ忘れ、全角スペースの消し忘れ、インデントの間違いがないかの確認
・class名が重複していないかの確認
・imgの格納場所のコードの確認

質問
どうすれば、画像を表示することができるでしょうか?

大変恐縮ですが、この問題がお分かりになる方、ご教授頂けると幸いです。

よろしくお願いします。

念のため、私のwebsiteのURLをここに記載させていただきます。
URL

HTML

<div class = "maincontents"> <div class="slideshow"> <div class="slideshow-slides"> <a href="#" class="slide"><img src="box img/box slide/slide-1.gif" alt=""></a> <a href="#" class="slide"><img src="box img/box slide/slide-2.gif" alt=""></a> <a href="#" class="slide"><img src="box img/box slide/slide-3.gif" alt=""></a> <a href="#" class="slide"><img src="box img/box slide/slide-4.gif" alt=""></a> </div> <div class="slideshow-nav"> <a href="#" class="prev">Prev</a> <a href="#" class="next">Next</a> </div> <div class="slideshow-indicator"></div> </div> </div>

CSS

.slideshow { background-color: rgb(0, 0, 0); height: 465px; min-width: 960px; overflow: hidden; position: relative; } .slideshow-slides { height: 100%; position: absolute; width: 100%; /* left は JavaScript で指定 */ } .slideshow-slides .slide { height: 100%; overflow: hidden; position: absolute; width: 100%; /* left は JavaScript で指定 */ } .slideshow-slides .slide img { left: 50%; margin-left: -800px; position: absolute; } .slideshow-nav a, .slideshow-indicator a { background-color: rgba(0, 0, 0, 0); /* for IE9 */ overflow: hidden; } .slideshow-nav a:before, .slideshow-indicator a:before { content: url(../img/sprites.png); display: inline-block; font-size: 0; line-height: 0; } .slideshow-nav a { position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; margin-top: -36px; } .slideshow-nav a.prev { margin-left: -480px; } .slideshow-nav a.prev:before { margin-top: -20px; } .slideshow-nav a.next { margin-left: 408px; } .slideshow-nav a.next:before { margin-left: -80px; margin-top: -20px; } .slideshow-nav a.disabled { display: none; } .slideshow-indicator { bottom: 30px; height: 16px; left: 0; position: absolute; right: 0; text-align: center; } .slideshow-indicator a { display: inline-block; width: 16px; height: 16px; margin-left: 3px; margin-right: 3px; } .slideshow-indicator a.active { cursor: default; } .slideshow-indicator a:before { margin-left: -110px; } .slideshow-indicator a.active:before { margin-left: -130px; } /* JavsScript 無効時 */ .no-js .slideshow { height: auto; } .no-js .slideshow-slides { height: auto; position: static; } .no-js .slideshow-slides .slide { display: block; height: auto; position: static; } .no-js .slideshow-slides .slide img { margin: auto; position: static; } .no-js .slideshow-nav, .no-js .slideshow-indicator { display: none; } コード

JS

$(function () { /* * Slideshow */ $('.slideshow').each(function () { // 変数の準備 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - var $container = $(this), // a $slideGroup = $container.find('.slideshow-slides'), // b $slides = $slideGroup.find('.slide'), // c $nav = $container.find('.slideshow-nav'), // d $indicator = $container.find('.slideshow-indicator'), // e // スライドショー内の各要素の jQuery オブジェクト // a スライドショー全体のコンテナー // b 全スライドのまとまり (スライドグループ) // c 各スライド // d ナビゲーション (Prev/Next) // e インジケーター (ドット) slideCount = $slides.length, // スライドの点数 indicatorHTML = '', // インジケーターのコンテンツ currentIndex = 0, // 現在のスライドのインデックス duration = 500, // 次のスライドへのアニメーションの所要時間 easing = 'easeInOutExpo', // 次のスライドへのアニメーションのイージングの種類 interval = 7500, // 自動で次のスライドに移るまでの時間 timer; // タイマーの入れ物 // HTML 要素の配置、生成、挿入 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - // 各スライドの位置を決定し、 // 対応するインジケーターのアンカーを生成 $slides.each(function (i) { $(this).css({ left: 100 * i + '%' }); indicatorHTML += '<a href="#">' + (i + 1) + '</a>'; }); // インジケーターにコンテンツを挿入 $indicator.html(indicatorHTML); // 関数の定義 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - // 任意のスライドを表示する関数 function goToSlide (index) { // スライドグループをターゲットの位置に合わせて移動 $slideGroup.animate({ left: - 100 * index + '%' }, duration, easing); // 現在のスライドのインデックスを上書き currentIndex = index; // ナビゲーションとインジケーターの状態を更新 updateNav(); } // スライドの状態に応じてナビゲーションとインジケーターを更新する関数 function updateNav () { var $navPrev = $nav.find('.prev'), // Prev (戻る) リンク $navNext = $nav.find('.next'); // Next (進む) リンク // もし最初のスライドなら Prev ナビゲーションを無効に if (currentIndex === 0) { $navPrev.addClass('disabled'); } else { $navPrev.removeClass('disabled'); } // もし最後のスライドなら Next ナビゲーションを無効に if (currentIndex === slideCount - 1) { $navNext.addClass('disabled'); } else { $navNext.removeClass('disabled'); } // 現在のスライドのインジケーターを無効に $indicator.find('a').removeClass('active') .eq(currentIndex).addClass('active'); } // タイマーを開始する関数 function startTimer () { // 変数 interval で設定した時間が経過するごとに処理を実行 timer = setInterval(function () { // 現在のスライドのインデックスに応じて次に表示するスライドの決定 // もし最後のスライドなら最初のスライドへ var nextIndex = (currentIndex + 1) % slideCount; goToSlide(nextIndex); }, interval); } // タイマーを停止る関数 function stopTimer () { clearInterval(timer); } // インベントの登録 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - // ナビゲーションのリンクがクリックされたら該当するスライドを表示 $nav.on('click', 'a', function (event) { event.preventDefault(); if ($(this).hasClass('prev')) { goToSlide(currentIndex - 1); } else { goToSlide(currentIndex + 1); } }); // インジケーターのリンクがクリックされたら該当するスライドを表示 $indicator.on('click', 'a', function (event) { event.preventDefault(); if (!$(this).hasClass('active')) { goToSlide($(this).index()); } }); // マウスが乗ったらタイマーを停止、はずれたら開始 $container.on({ mouseenter: stopTimer, mouseleave: startTimer }); // スライドショーの開始 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - // 最初のスライドを表示 goToSlide(currentIndex); // タイマーをスタート startTimer(); }); }); コード

イメージ説明

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

HTML5

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

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