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

左スライド移動の実装

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
画像部分を、左にスライド移動させる方法について解説致します。
講師:
08:00

字幕

このレッスンではスライドショーを 実装するにあたり JavaScript と jQuery を使って 画像部分を左方向にローテーションさせる― 方法について解説いたします ダウンロードしてきたこちらの slide_left というフォルダの中にある― HTML ファイルと JavaScript ファイル そして CSS ファイルを エディターで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を進めて行きます 早速レッスンを始めていきましょう まず javascript.js を エディターで確認してみましょう 下の方を見ていくと この部分 この部分に今回説明する ローテーションするバナーを 左方向にスライド移動させる処理が 既に書かれている状態です この部分を目で追いながら 実際にどのように左方向にスライドさせて いるかを確認していきましょう まずはこちらの function そして moveLeft ( ) です こちらではユーザー定義関数を作っています その関数の名前はこの moveLeft です そして { そしてここに } そして こちらの { } の間に 具体的な処理を書いています まずは こちらの部分 こちらの部分では ul#slideBox の 直下にある li 要素 要するにローテーションさせる画像を 一つ一つ個別に囲っている li 要素です それを指定しています そしてその後に filter と書いています その後ろに ( ) と書いて その間に : not ( : animated) と書いています これは先程指定したこちらの ul#slideBox 直下の li 要素で かつ アニメーションしていないものを 限定して指定する方法となります このように指定することで アニメーションが動いている最中に 再度アニメーションを動かすといったような ことを未然に防いでいます 要するに静止している画像のみを 左にスライドさせるという意味合いになります その後に each と書いていますね この each はこの アニメーションしていない li 要素 今回画像は5つあるので 5つ li 要素があります それらに一つ一つ繰り返し同じ 処理を与えていくという意味になります その each の後の ( ) の中には function そして (idx) そして { そしてここに } の ) の ; と書いています その function の { } の中には 実際に左にスライド移動させる 処理が書かれています 因みに こちらの function の ( ) の 中にある idx これは前回のレッスンでも解説したとおり この idx という変数の中には現在 処理しているこの li 要素の番号 ―順番―が格納されています プログラムの世界では 数字は0から始まるので 1番目の li 要素であれば0番目 2番目の要素であれば1番目 という形でしたね では具体的に画像を左にスライドさせている こちらの処理について見ていきましょう まずこちらです 変数 pos というのを作っています その中に parsInt ( ) と書いて この中に $(this). css('left') と入っています これはこの this というのは each で処理されている そのものの li 要素ですね 例えば順番に1番目の li 要素 次に each が回ってきたら2番目の li 要素 更に each が回ってくれば3番目の li 要素 という形ですね それらの個別の li 要素に対して css そして left と書いています こうすることによって この指定した li 要素の現在の left の 値を取得することができます そうして取得してきた li 要素の left の値を parsInt の ( ) で囲ってあげることで それを文字列から数値に変更する事が可能です そして数値に変更した値をこの変数 pos に 代入している形になります 次の行 こちらです こちらでも同様に新しい変数を定義しています こちらは nextPos という名前にしています そして = pos - imgWidth と書いています imgWidth というのはこの JavaScript の 上の方で定義しているコチラですね 画像の横幅を指し示しています 今回は画像の横幅は 840 px となるので こちらの imgWidth には 840 が格納されています それを pos こちらの変数に格納されている― 現在の css の left の値から 引いてあげた値を こちらの nextPos という 変数の中に代入しています この nextPos に代入される値は その名の通り 画像の横幅1つ分を現在の位置から 左にずらした left の値 がこちらに入ってくるわけです そしてココで取得した値を 最後の行で利用して行きます まず $(this) li 要素そのもの に animate とすることで アニメーションの処理を加えることができます どのようなアニメーションかと言うと コチラ { } で囲まれた部分 こちらには left: nextPos と書いています nextPos は次の移動先の位置を 表しています 要するにこのように書くことで 現在の位置から nextPos に代入されている 次の位置に対して 移動するアニメーションを実行しろ という意味になります そして最後のこの fast は そのアニメーションのスピードを 速く実行するという意味合いになります 以上 これらの処理を書くことによって 各画像を左にスライドさせていく 処理を実装することができました あとはこちらのユーザー定義関数 moveLeft を 画像を左にスライドさせたいときに 呼び出してあげればOKです 以上でレッスンは終了です 今回はスライドショーを実装するにあたり JavaScript と jQuery を使って画像部分を 左方向にローテーションさせる 方法について解説しました 以降のレッスンでは今回のレッスンとは逆に 画像部分を右側方向にローテーションさせる 方法について解説します そちらも合わせてご覧下さい

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

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

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

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

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

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