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

右スライド移動の実装

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

ぜひご覧ください。

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

字幕

このレッスンではスライドショーを 実装するにあたり JavaScript と jQuery を使って 画像部分を右方向にローテーションさせる 方法について解説します ダウンロードしてきたこちらの slide_right というフォルダの中に入っている― HTML ファイルと JavaScript ファイル そして CSS ファイルを エディターで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を進めて行きます 早速レッスンを始めていきましょう まずは javascript.js をエディターで 確認してみます こちらのファイルの下の方に この部分に今回のレッスンで解説する― 右に画像をスライドさせてローテーション させるプログラムが書かれています このプログラムを順に目で追いながら どのように実装しているかを 確認していきたいと思います まずは こちらの function を 使ってユーザー定義関数を作っています その関数の名前は moveRight と しています そして ( ) の { } この { } の間に具体的に右に スライドさせる処理を書いています まずは こちらの部分 こちらの部分には左にスライド 移動させるのと同様の形で 移動させる li 要素を定義しています まずは こちらの部分 こちらの部分では ul#slideBox の 直下にある li 要素を指定しています 今回は画像が5つあるので それを囲って いる li 要素5つという意味です その後に こちらの filter を 使って更に絞り込んでいます どのように絞り込んでいるかと言うと not animated 要するにアニメーションしていない li 要素 という意味です 更に言うと静止している li 要素という 意味合いになります その li 要素に対して each この each でこの5つある li 要素の 全てに対して順番に 右にスライド移動させる処理を書いています その後に function (idx) { この部分に } の ) の ; です そしてこの { } の中のこの部分で 実際に右にスライドさせる処理を書いています この idx は前回の左スライド移動と同様に 移動させる li 要素の順番ですね それが格納されています 要するに1番目の li 要素であれば ここには0 2番目の li 要素であれば ここには1 という値が格納されて行きます では実際の右スライド移動の処理の 部分について見ていきましょう まずはこの部分 この部分では変数 pos を制作しています そして parsInt の ( ) ; この parsInt の ( ) の中には $(this). css('left') と書いています この $(this). css('left') で この this が指し示す― each で処理をしている li 要素そのもの 例えば1番目の li 要素 そして each が回ってくれば 2番目の li 要素 そして更に each が回ってくれば 3番目の li 要素 という形でその処理をする li 要素そのものが格納されてくる訳です それの css の left の値を取得する という命令になります そしてそこで取得した left の値を parsInt で囲ってあげることによって 取得してきた値を数値に変換しています そして数値に変換した値を こちらの変数 pos に代入しています 次にこの部分を見ていきましょう この部分でも同様に 新しい変数 nextPos を定義しています そしてその nextPos に代入する値ですが 先程取得した li 要素の現在の left の値 pos ですね こちらの変数に足す imgWidth こちらの imgWidth はこの JavaScript ファイルの上の部分で定義している― こちらの変数です ここにはスライドさせる画像の 横幅1つ分の 840 px を表す― 840 の数値が代入されています この 840 を足してあげています こうすることでこの変数 nextPos には 画像を右にスライドさせた時の 位置が入ってくるわけです そしてこの nextPos を使って 実際に右にスライドさせるアニメーションを 書いているのがこの部分です ここで $(this) そして .animate と書いています これはその名の通りに この $(this) の要素をアニメーションさせろ― という意味になります どのようにアニメーションさせるかと言うと この { } の中です この { } の中では css プロパティの left に nextPos の値を設定しろ― という命令を書いています こうすることによって この this の現在の位置から この nextPos の位置まで アニメーションを実行しろ― という意味になります そして 最後のこちらの fast は そのアニメーションのスピードを速く 実行するという意味になります このように書くことで 右にスライドさせる処理の実装が完了します あとはこちらで定義したユーザー定義関数 moveRight を 画像を右にスライドさせたいタイミングで 呼び出してあげれば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宛までご連絡ください。