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

一定間隔での自動ローテーション実装

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
一定間隔で、画像部分をスライドさせて順番に画像を表示させていく方法について解説致します。
講師:
04:27

字幕

このレッスンでは JavaScript と jQuery を使って スライドショーを実装するにあたり 画像を一定間隔で自動でローテーションさせる 方法について解説していきます ダウンロードしてきたこちらの auto_rotation というフォルダの中にある― HTML ファイルと JavaScript ファイル そして CSS ファイルを エディターで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を進めて行きます 早速レッスンを始めていきましょう まずは javascript.js のファイルを エディターで確認します このファイルのずっと下を見て行くと こちらの部分で今回説明する 自動でローテーションさせる為の― プログラムが既に書かれている状態です この部分を順を追って どのように自動ローテーションを 実装しているか確認していきます まずはこちら function startRotation( ) としています このように書くことで startRotation という名前の ユーザー定義関数を定義しています そしてこの { } の間で 実際に一定間隔で― 自動ローテーションさせる為の プログラムを書いています まずは こちらの変数 timer ですが これは こちらの javascript.js ファイルの 上の方にある― こちらの var timer として定義してある こちらの変数を利用しています そして こちらの timer の中に setInterval で 戻ってくる値 この setInterval の ( ) の中 timer ID を格納しています こちらには function( ){ そしてこちらの } と書いてその { } の中で moveLeft の ユーザー定義関数を呼び出しています そして この { } の後の , (カンマ)の後に 一定間隔で呼び出すための秒数 その一定間隔の秒数 これを 3000 ミリ秒 要するに3秒と 定義しています このように書くことで この moveLeft のユーザー定義関数を 3秒おきに実行させることができる訳です 最後にこちらの function startRotation の } の後に startRotation ( ); と書いて こちらのユーザー定義関数を実行させています このように書くことで実際にこちらの index.html がブラウザで開かれた時に この startRotation が発動して こちらの自動処理が動く仕組みになっています では この状態で index.html をブラウザで 開いて動作を確認してみましょう こちらの index.html をブラウザで開きます 今回確認に利用するブラウザは Chrome ブラウザです では開いてみましょう すると このように表示されてきますね そしてこちらの左右のボタンを クリックしていなくても このように画像がローテーションして 行ってるのが分かります その間隔は3秒おきですね このように動作すればきちんと自動 ローテーションの実装が完了している― という形になります では エディターに戻ります 以上でレッスンは終了です 今回はスライドショーを実装するにあたり 一定間隔で画像を自動でローテーション させる方法について解説しました 以降のレッスンでは画像の上に マウスカーソルがある際は この自動ローテーションを一時的にとめて 画像の上からマウスカーソルが放れた際には 再度ローテーションを動かす方法について 解説いたしますので そちらも合わせてご覧下さい

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

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

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

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

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

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