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

自動ローテーションの一時停止と再開

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
画像部分にマウスオーバーした際に、自動ローテーションを一時停止する方法、そして、逆に画像部分からマウスアウトした際に、自動ローテーションを再開する方法について解説致します。
講師:
05:26

字幕

このレッスンでは JavaScript と jQuery を 使ってスライドショーを実装するにあたり 画像の自動ローテーション機能を 一時停止させる方法と 再開させる方法について解説します まずダウンロードしてきたこちらの pause というフォルダの中に入っている― HTML ファイルと JavaScript ファイル そして CSS ファイルを エディターで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を進めて行きます 早速レッスンを始めていきましょう 今回は こちらの ul#slideBox の要素上に マウスカーソルが置かれた時 その際には自動でローテーションしている 画像を一時停止して 更に こちらの ul#slideBox 上から マウスカーソルが放れた時 そのローテーションのアニメーションを 再開するという手順をやってみます javascript.js をエディターで 確認してみます そしてこちらのファイルの中の一番下 こちらの部分 こちらの部分にその処理が 書かれている状態となっています まずは一時停止の方から 順に目で追って確認して行きましょう 一時停止の処理はこちらの部分に 記述されています まずは $( ) と書いて その中に ul#slideBox という セレクタを記述します そしてその後に .on と書いて ( そしてその後に mouseenter と書きます このようにすることで この ul#slideBox 上にマウスカーソルが 載った時 という形になります そしてマウスカーソルが載った時に 特定の処理をさせるために その後に , と書いて function( ) { } と書きます そして ) の ; で文を閉じます そしてこちらの function の { } の中に clearInterval と書いて ( ) の中に timer の変数を入れています この timer は前回のレッスンで行った― setInterval の戻り値として 取得した timer ID ですね これをこの clearInterval の ( ) の中に 入れてあげることによって この一定間隔で動作する処理を止める― といった処理になります 次に 画像からマウスカーソルが放れた時 この一定間隔の自動ローテーションの処理を 再開させる方法について見ていきます その部分はコチラの部分になります 先程と同じように $( ) の中に ul#slideBox というセレクタを入れて その後に .on そして ( と書いて その後に mouseleave と書いています これは先程の mouseenter とは逆で マウスカーソルが放れた時という 意味合いになります そしてその後に , function( ) の { } そして ) ; と書いて文を閉じます そして こちらの function の { } の中に startRotation( ) の ; と書いています この startRotation ですが こちらも前回のレッスンで制作した― こちらのユーザー定義関数 startRotation ですね これをコチラで呼び出してあげることによって 再度こちらの setInterval が動作する といった形になります このようにすることで自動ローテーションの アニメーションが再開する訳です ではこの状態で index.html をブラウザで 開いて実際の動作を確認してみましょう こちらの index.html をブラウザで 開きます 利用するブラウザは ここでは Chrome ブラウザを利用します では 開いてみましょう すると 現在はこのように自動で ローテーションされていますね では こちらの画像の上に マウスカーソルをおいてみます するとこのように自動ローテーションが 一時停止して止まっている状態になっています では逆に今度はこちらのマウスカーソルを この画像から放してみます するとこのように自動ローテーションの アニメーションが再開されましたね このように動作すればこの自動 ローテーションの一時停止と再開の― プログラムの実装はきちんと 完了できていることになります ではエディターに戻ります 以上でレッスンは終了です 今回はスライドショーを実装するにあたり 画像の自動ローテーション機能を一時停止 及び再開させる方法について解説しました 以降のレッスンでは画像がローテーション するタイミングで 自動ローテーションのタイマーを制御する 方法について解説しますので そちらも合わせてご覧下さい

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

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

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

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

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

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