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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

2727閲覧

JavaScriptでボタンを使って画像をループさせたいです(スライドショー)

kei_02

総合スコア2

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2020/06/25 02:51

編集2020/06/25 03:01

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
jsを使って画像のスライショーをつくっているのですが、最初のボタンと最後のボタンを押した際にループするようにしたいのですがどのようにすればいいかわかりません。

該当のソースコード

html ソースコード <!DOCTYPE html> <html class="no-js" lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Chapter 05-02 &#xB7; jQuery 最高の教科書</title> <link rel="stylesheet" href="./css/normalize.css"> <link rel="stylesheet" href="./css/main.css"> <script src="./js/vendor/modernizr.custom.min.js"></script> <script src="./js/vendor/jquery-1.10.2.min.js"></script> <script src="./js/vendor/jquery-ui-1.10.3.custom.min.js"></script> <script src="./js/main.js"></script> </head> <body> <div class="slideshow"> <div class="slideshow-slides"> <a href="./" class="slide" onclick="goBack()" id="slide-1"><img src="./img/slide-1.jpg" alt="" width="1600" height="465"></a> <a href="./" class="slide" id="slide-2"><img src="./img/slide-2.jpg" alt="" width="1600" height="465"></a> <a href="./" class="slide" id="slide-3"><img src="./img/slide-3.jpg" alt="" width="1600" height="465"></a> <a href="./" class="slide" onclick="goForward()" id="slide-4"><img src="./img/slide-4.jpg" alt="" width="1600" height="465"></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> </body> </html>
JavaScript ソースコード $(function () { /* * Slideshow */ $('.slideshow').each(function () { var _imgNum = 0; //画像の枚数 var _current = 0; //現在の画像 // 変数の準備 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 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)は各.slideを表す //1枚目はi=0でleft0%なので表示される。 //2枚めはi=1でleft100%nなので画面外で表示されない $(this).css({ left: 100 * i + '%' }); //HTML構築での数値はダミーでCSS Scriptでドットを実現 indicatorHTML += '<a href="#">' + (i + 1) + '</a>'; }); // インジケーターにコンテンツを挿入 $indicator.html(indicatorHTML); // 関数の定義 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - // 任意のスライドを表示する関数 //indexの場所のスライドへ飛ぶ 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(''); } else { $navPrev.removeClass(''); } // もし最後のスライドなら Next ナビゲーションを無効に if (currentIndex === slideCount - 1) { $navNext.addClass(''); } else { $navNext.removeClass(''); } // 現在のスライドのインジケーターを無効に $indicator.find('a').removeClass('') .eq(currentIndex).addClass(''); } // タイマーを開始する関数 function startTimer () { // 変数 interval で設定した時間が経過するごとに処理を実行 timer = setInterval(function () { // 現在のスライドのインデックスに応じて次に表示するスライドの決定 // もし最後のスライドなら最初のスライドへ var nextIndex = (currentIndex + 1) % slideCount; goToSlide(nextIndex); }, interval); } // タイマーを停止る関数 function stopTimer () { //タイマーを削除する clearInterval(timer); } // インベントの登録 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - // ナビゲーションのリンクがクリックされたら該当するスライドを表示 $nav.on('click', 'a', function (event) { //aタグなので押されてもリンクとして機能しないようにする 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')) { //$(this).index()は「兄弟要素での何番目か」 //ここでの$(this)はインジケーターのaタグ goToSlide($(this).index()); } }); // マウスが乗ったらタイマーを停止、はずれたら開始 $container.on({ mouseenter: stopTimer, mouseleave: startTimer }); // スライドショーの開始 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - // 最初のスライドを表示 goToSlide(currentIndex); // タイマーをスタート startTimer(); }); });

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

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

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

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

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

guest

回答1

0

ベストアンサー

関数goToSlideの中で、渡されたindexの値とスライドの数を比較すれば「最初のボタンと最後のボタンを押した際」が判定できると思います。

投稿2020/06/25 02:56

kei344

総合スコア69458

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

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

kei_02

2020/06/25 03:08

すごく初心者なのでソースコードのヒントなどあると助かります!
kei_02

2020/06/26 04:02

比較とは比較演算子を使うということでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問