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

左右移動ボタンへのクリックイベント登録

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
左右移動ボタンに、クリックイベントを登録して、ボタンをクリックすることで、画像部分を左右にスライド移動させる方法について解説致します。
講師:
05:09

字幕

このレッスンでは JavaScript と jQuery を使って スライドショーを実装するにあたり 左右移動ボタンにクリックイベントを登録して 実際に画像をその方向にローテーション させる方法について解説します ダウンロードしてきたこちらの フォルダーの中に入っている― HTML ファイルと JavaScript ファイル そして CSS ファイルを エディターで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を進めて行きます 早速レッスンを始めていきましょう 今回クリックイベントを登録する 左右の移動ボタン部分ですが HTML ソース上で見ると この部分になります それぞれ矢印の画像を囲む li タグには それぞれ prevBtn と nextBtn の id が付いています これを踏まえながら JavaScript で クリックイベントを実装して行きます では javascript.js をエディターで 確認してみましょう そして下の方に行くと こちらの部分 こちらの部分に 今回実装する左右移動ボタンへの― クリックイベント登録のプログラムが 書かれている状態になっています これを順に目で追いながら どのように実装しているかを 確認していきたいと思います まず こちらの部分 こちらの部分で li#prevBtn.on そして click と書いています このように書くことで この li#prevBtn に対して クリックイベントを登録することができます そしてクリックした時に発動する 実際の処理というのは こちらの function の { } の間に 書かれています どのように書かれているかと言うと まずはこの部分 $(this).blur( ) ; この部分でクリックされた時に 移って来るフォーカスを外しています そして前回のレッスンで作成した ユーザー定義関数 moveRight それをここで呼び出しています そして最後にこちらの return false で クリックしたときのデフォルトの処理を 無効化しています このように書くことで今回呼び出す ユーザー定義関数 moveRight に 関係のない他の処理を無効化させて 意図しない動作になる事を防いでいます 次は右向きの矢印ボタンについて 見て行きましょう こちらの部分ですね 基本的には左ボタンの時と全く同じです 違うのは まずこちら li#nextBtn に対してクリックイベントを 登録しています その時に発動する内容は moveLeft こちらも以前のレッスンで 定義したユーザー定義関数ですね これを発動させることによって 画像を左にローテーション させることが可能になります ではこの状態で index.html を ブラウザで開いて 実際の動作を確認してみましょう こちらの index. html をブラウザで 確認します 確認するブラウザはここでは Chrome ブラウザを利用します では確認してみましょう このように表示されてきました まず左向きのボタンをクリックしてみましょう するとこのように E の画像が表示されてきました これは5つ目の最後の画像となっています では右向きのボタンをクリックして みたいと思います すると このように 次は A が表示されてきましたね そして更に B 更にクリックすると C というような形でしっかりとスライド アニメーションしているのが分かります このように左右の矢印をクリックして アニメーションすれば きちんと JavaScript のプログラムの 実装ができているという形になります エディターに戻ります 以上でレッスンは終了です 今回はスライドショーを実装するにあたり 左右移動ボタンにクリックイベントを登録して 画像を左右に移動させる方法を解説しました 以降のレッスンでは最初または最後の画像を スライド表示させた際に 連続して最後または最初の画像を表示させる― ローテーションのループの 実装方法について解説いたします そちらも合わせてご覧下さい

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

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

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

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

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

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