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

ローテーション動作時のタイマー制御

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
画像がローテーションするタイミングで、自動ローテーションのタイマーを制御して、不自然な動作にならないように設定する方法について解説致します。
講師:
03:03

字幕

このレッスンでは JavaScript と jQuery を 使ってスライドショーを実装するにあたり 画像のローテーションを動作させる タイミングで 自動ローテーションのタイマーを制御して 不自然な動きにならないように 設定する方法について解説します まずダウンロードしてきたこちらの timer_control というフォルダの中にある― HTML ファイルと JavaScript ファイル そして CSS ファイルを エディターで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを利用しながら 今回のレッスンの解説を進めて行きます 早速レッスンを始めましょう まずは javascript.js のファイルを エディターで確認します 今回確認する所は こちらの部分になります まずはこの部分 この部分は function moveLeft の ユーザー定義関数の { } の中 この部分に自動ローテーションタイマーを 停止させるための clearInterval を入れています そして更に コチラですね こちらでは自動ローテーションを 再開させるために startRotation ― というユーザー定義関数を呼び出しています この2つの処理をこの function moveLeft の中に組み込むことによって 不自然なローテーションのアニメーションに ならないように予め防止できます 不自然なアニメーションとは具体的に どういうものかと言うと 例えば矢印ボタンをクリックして 次の画像や前の画像を表示させている時 この間にも自動ローテーションの タイマーはカウントを続けています そのため矢印ボタンをクリックした途端に ローテーションのカウントが満たされて 次の画像を表示させるような動きが 同時に発生してしまう為 結果として不自然なアニメーションに なってしまいます そういうトラブルを防ぐためにこの2つの 処理を組み込んでいるわけです そして今こちらの moveLeft の方を 確認しましたが 同じく moveRight の方にも 同様の処理を付け加えています こちらの部分と こちらの部分です このように逆方向のローテーションに対しても 不自然なアニメーションにならないように 未然に防止しておくことが必要となります 以上でレッスンは終了です 今回はスライドショーを実装するにあたり 画像がローテーションするタイミングで 自動ローテーションのタイマーを制御する 方法について解説しました 今回のレッスンでもって JavaScript と jQuery を利用した― スライドショーの制作は完了です このコースでスライドショーを作る 基本をマスターすれば 応用して思いのままのデザインの スライドショーを 作ることができるようになりますので 是非習得しておきましょう

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

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

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

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

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

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