JavaScript + jQueryで作るスライドショー

画像ローテーションのループ実装

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
最初または最後の画像をスライド表示させた際に、連続して、最後または最初の画像を表示させる方法について解説致します。
講師:
09:57

字幕

このレッスンでは JavaScript と jQuery を使って スライドショーを実装するにあたり 画像のローテーションをループさせる 方法について解説していきます まずはダウンロードしてきた こちらの loop というフォルダの中に入っている HTML ファイルと javascript ファイル そして css ファイルを エディタで開いてください そしてこれがそれらのファイルを 開いた状態です これらのファイルを使って 今回のレッスンの解説を すすめていきたいと思います それでは早速レッスンを始めていきましょう 今回ご紹介する画像ローテーションの loop ということですが これは例えば 1 番目の画像 2 番目の画像 3 番目の画像と言った形で 順番に表示させていったときに 最後の 5 番目の画像を表示させた後に さらに次の画像を表示させようとした時に 1 番目の画像に戻って 順番に表示させていく方法についての 解説になります もちろん逆のパターンもあります 1 番目の画像を表示した後に 逆順で 5 番目の画像 そして4 番目の画像 3 番目の画像― といった形で表示させていく方法についても 合わせて解説していきます では javascript.js を エディタで開いて確認してみます そしてこのファイルの まずはこちらの部分です こちらの部分では 5 つ目の画像を表示させた後に また 1 番目に戻って 順番に 1 番目 2 番目の画像を 表示させていく方法のプログラムが 実装されています では順を追って どのようにプログラムが書かれているか 確認していきたいと思います まずここまでの部分は 以前のレッスンでご紹介したとおり 画像を含んだ li 要素を 現在の位置から次の位置まで移動させる アニメーション― が書かれている部分でしたね 今回はさらにこの fast の後に カンマを付けて function ( ) 括弧 括弧閉じる { } 波括弧 波括弧閉じる― を作っています こうすることによって このアニメーションが完了した際に このファンクションの 波括弧の間に書かれているこの処理を 走らせることができるようになります ではアニメーションが完了したときに どのような処理を走らせているかというと まずは if 文を使って idx と imgNum - 1(マイナス 1) という値を比較させていきます この idx は こちらの each で処理をしている li 要素の順番ですね それが格納されています 例えばアニメーションが実行されている この this が表している内容が 1 番目の li 要素だった場合 こちらの idx の中身は 0 が格納されていましたね 2 つ目の li 要素であった場合は ここは 1 となりました その idx とこの imgNum 今回は 5 つの画像なので ここには 5 という値が格納されていますが そこからマイナス 1 された値が == イコールだった場合 この if 文の後の { } 波括弧の中の処理を実行させる という意味合いになっています これはつまりどういうことかというと この each を使って 順番に 1 つ目から 5 つ目までの li 要素に対して アニメーションを実行させている 処理の中で― こちらの idx が 4 であった場合 こちらの if 文の後の 波括弧の処理を実行させる― つまりは最後の li 要素だった場合 という意味になります もっと噛み砕いて言えば アニメーションがすべて 完了したときという意味になります そしてそのアニメーションが すべて完了したとき 何をするかというと こちらです まず ul#slideBox の直下にある li 要素 そしてそこに eq がついて 0 番目という指定をしているので ul#slideBox の直下にある 0 番目のli 要素に 要するに 1 番目の li 要素ですね― に対して css の設定をしています どのように設定しているかというと css の left プロパティに対して imgWidth * (imgNum - 2) としています このようにすることで 先頭にあった li 要素の位置を 右端 要するに最後の位置に 持って来るという命令になります そしてさらにこちらの appendTo ( ) を使うことによって この HTML ソース上でも 最初にあったこちらの li 要素を さらに HTML 上でも 最初にあった li 要素を こちらの ul#slideBox の中の 最後に持ってこいという命令になります このようにすることで 左スライドのアニメーションが動く度に 一番始めにある li 要素を 一番最後に移動させてくる処理が 走る様になり 結果として画像が loop するような形に 実装することができます それではこれの逆向きのパターンを 見てみたいと思います 逆向きのパターンはこちらに記載しています 内容的には先ほどの左スライドの場合と ほとんど同じですが 今度は右スライド移動のアニメーションの際に 実行する内容なので その画像の移動も逆向きになっています では具体的にどのようになっているかというと まずこちら if 文で idx == imgNum - 1 としています このようにすることで 先ほどと同様に すべてのアニメーションが完了したら こちらの if 文の後の波括弧 { } の処理を走らせるようにしています そしてこちらの波括弧の中ですが まず ul#slideBox の直下にある li 要素― そしてそれに eq imgNum-1 とすることで 最後の li 要素を取得しています そしてその最後の li 要素に対して こちらの css で left の値を変更します 今回は 0 - imgWidth としています 要するに 0 -(マイナス)840 ということで 位置的には画像を左端に持って来い といった命令になります そしてさらにこれを prependTo ( ) とすることで この括弧の中に入っている ul#slideBox の中で― HTML ソース上でも一番最初に持って来る といった形にしています このようにすることで 右スライド移動のアニメーションが 発動したときに 最後の li 要素が 一番最初に移動してくる形となります 結果として loop アニメーションが 成立することになります それではこの状態で index.html をブラウザで開いて 動作を確認してみたいと思います こちらの index.html を ブラウザで開きます 確認するブラウザは Chrome ブラウザを利用します それでは開いてみましょう するとこのように表示されてきますね ではこちらの右矢印を クリックしていってみましょう 今 A と表示されていますね 次は B そして C D E この E が 5 番目の画像となり 最後の画像となります ではさらにクリックしてみたいと 思います すると A というふうに 最初の画像が表示されてきましたね このように B C D E そして A とループしていく形になります 逆も試してみましょう 現在は A が表示されていますね こちらをクリックしていくと E D C B A という形に 逆順で表示されて さらにこの状態でこちらをクリックすると また E という形でループしていきます このように動作すれば きちんとループの実装が できているということです それではエディタに戻ります 以上でレッスンは終了です 今回はスライドショーを実装するにあたり 画像のローテーションを ループさせる方法について解説しました 以降のレッスンでは このローテーションを 左右移動ボタンをクリックしなくても 一定間隔で自動でローテーションさせる方法 について解説いたしますので そちらも合わせてご覧ください

JavaScript + jQueryで作るスライドショー

このコースでは、JavaScriptとjQueryを使ってスライドショーを作成する方法について学習します。具体的には、手動切り替えボタンが付いた画像のスライドショーをJavaScriptとjQueryを利用して実装する方法について解説します。同時にHTMLとCSSでのコーディングの仕方やJavaScriptやjQueryの基本についても学ぶことができます。

1時間18分 (15 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2014年09月28日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。