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

画像の初期配置

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
画像の並びを、JavaScriptで初期の状態に並べる方法について解説致します。
講師:
09:12

字幕

このレッスンでは スライドショーを実装するにあたり JavaScript ファイルと jQuery を利用して ローテーションする5つの画像を 横一列に並べて画像の配置を初期状態に セットする方法について解説します ダウンロードしてきた こちらのフォルダの中に入っている― HTML ファイルと JavaScript ファイル そして CSS ファイルを エディターで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使いながら 今回のレッスンの解説を進めて行きます 早速レッスンを始めましょう まず javascript.js を エディターで開いて下さい するとこのように 既に今回のレッスンで 解説するプログラムが書かれている状態です このプログラムを順に目で追いながら いくつかポイントについて確認していきます まずは こちらの部分です こちらの部分で変数を定義しています どのような変数かと言うと まずは こちらの imgWidth そして = 840 と書いています こちらの部分でローテーションする バナー1つの横幅を指定しています 今回はその横幅が 840 px なので ここでは 840 と書いています 次に こちらの変数 imgNum こちらには この部分で指定している通りに ul#slideBox の直下にある li 要するに5つのスライドを 個別に囲っている li です それの length 要するに数です この数をプログラムで取得して こちらの変数 imgNum という中に 格納しています 今回は5つですので ここには5と格納されています ここまで変数の定義が完了したら 次は実際にローテーションする 画像の初期配置について プログラムで実装していきます まずは こちらの3行に注目して行きましょう こちらは $('ul#slideBox') その直下にあるli 要素 先程も出てきたように これは5つの ローテーションのバナー それらを個別に囲っている li 要素に対して each という命令を使っています この each はこれらそれぞれの li 要素 ―今回は5つありますね― その li 要素に対して順番に繰り返し― 同じ処理を与えていくという命令になります そして function と書いて (idx){ この { の中には実際にその li 要素 それぞれに対して処理を行うプログラム そして } の ) の ; です 因みにこちらの function の後ろにある この idx ですが 今回は index という文字を省略して 書いています この idx には li 要素に対して 繰り返し処理を行う中で 何番目の li 要素に対して 処理を行っているかが― その都度格納されている変数となっています それでは実際にこちらの 具体的な処理を見て行きましょう まず $(this) ですが これは繰り返し処理を行う中で 実際に処理を加えている そのものの li 要素を指し示します 要するに1番目の li 要素に 処理を加えている際には この idx には 0 が入って こちらの this には1番目の要素が 格納されているということになります 因みに この idx が 何故 0 になるかと言うと プログラムの世界では 数は1から数えるのではなくて 0から数える為に こちらの idx には実際の順番の マイナス1 された値が 入っているという形になります では こちらの後の部分も見て行きましょう 例えば1番目の li 要素に 処理を加えている際には こちらの this 1番目の li 要素に対して css これはその名の通り css のプロパティを 変更するという意味合いです どのプロパティを変更するかと言うと left の値を このカンマの後 idx 掛ける imgWidth と書いています こうすることによって もしこの処理が1番目の li 要素に対して 行っているならば こちらの idx は0 要するに 0 掛ける 840 という風にこの left に設定しろ という命令です これを5つの li 要素に 繰り返し実装していくわけですから もし2番目の要素なら こちらは 1 掛ける imgWidth 要するに1 掛ける 840 3番目の li 要素ならば 2 掛ける 840 4番目の li 要素ならば 3 掛ける 840 ということで left のプロパティに 要するに画像の横幅 840 px 分を 横に一つずつずらして画像を置いて行ってる といった処理になるわけです このように書くことで画像を横一列に 配置していくことができるわけです その次は こちらの部分です こちらの部分では5つ目の画像を 1番目の画像の前に 設置するような処理を書いています これはなぜかと言うと 画像をローテーションさせる際に 1つ目の画像 2つ目の画像 3つ目の画像...といった形で 順に表示させる場合もあれば 逆に1つ目の画像 5つ目の画像 4つ目の画像...という形で逆順に 表示させていくこともあるため それをスムーズに行うために5つ目の画像を 敢えて1つ目の画像の左に 設置するようなプログラムを書いています 具体的にどのように書いているかと言うと まずはコチラ ul#slideBox の直下にある li 要素 その後に eq と書いています これは何番目の li 要素かを 指定するための命令です こちらの imgNum の変数 これは先程取得したこの部分ですね ここでは5と入っているので 5 マイナス 1 で 4という数字が入っています 先程説明したとおり プログラムの世界では 数字は0からカウントして行くので このようにマイナス1を 指定してあげることによって 5番目の要素を指定してあげることが できるわけです そしてその5番目の要素に対して 同じように css の left プロパティの 値を変更しています どのように変更しているかと言うと 0 - imgWidth ですね 要するに マイナス 840 px の位置に left を設定しています このようにすることで1番目の画像の前に 設置することができるわけです 最後 こちらの prependTo ですが この命令を書くことによって この ( ) の中に 書いてある要素 今回は ul#slideBox ですね この要素の先頭に こちらの 最後の li タグをもってこい― といったような命令になります このようにすることで HTML ソース上でも 最後の li 要素を最初の li 要素の前に 持って行くことが可能になるわけです これでローテーションする画像の 初期配置の設定は完了です 以上でレッスンは終了です 今回はスライドショーを実装していくにあたり JavaScript と jQuery を使って 画像部分を初期状態の位置に セットする方法について解説しました 以降のレッスンでは実際にこの画像部分を JavaScript と jQuery を利用して ローテーションさせる方法について解説します そちらも合わせてご覧下さい

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

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

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

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

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

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