WebデザイナーのためのjQuery実践講座

「スライドショー機能」の設定項目

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jKitプラグインを使った「スライドショー機能」を実装する為の設定項目について、解説致します。
講師:
03:48

字幕

このレッスンでは  jKit プラグインを使った― スライドショー機能を実装する為の 設定項目について解説していきます まずは ダウンロードしてきたこちらの slideshow-setting ― というフォルダーの中に入っている こちらの index.html ファイルと― そして こちらの js フォルダーの 中に入っている― この javascript.js ファイルを エディターで開いて下さい そして これがそれらのファイルを 開いた状態です 左側には index.html ファイル そして 右側には― javascript.js ファイルを 表示させています これらのファイルを使って 今回のレッスンの解説を― 進めていきたいと思います それでは 早速レッスンを始めていきましょう まずは 前回までのレッスンのおさらいです 前回までのレッスンではこちらのスライド部分 この部分ですね この部分に対して jKit プラグインを使って― スライドショー機能を 実装する所まで行いました 今回はそのスライドショー機能に対しての 機能や 動作を調製する為の― 設定項目についてみていきたいと思います それがこちらの部分となります それでは 上から順番に 見ていってみたいと思います まず このスライドショー機能の 設定項目ですが― こちらの jKit の後の括弧の中の 第二引数にこの様に波括弧で囲った中に― 書いていく事が出来ます 今回ご紹介するのは三つの設定項目です まず一つ目は autoplay そして 二つ目は animation そして― 三つ目は interval です 他にも設定できる項目はありますが 今回は主要なこちらの三つの項目に対して― ご紹介していきたいと思います まず一番上の autoplay autoplay はその名の通り スライドショーの自動再生をするかしないか― といった設定になります 今回は yes としていますね この様に書く事でスライドショーを 自動再生する事が出来ます 次にこちらの animation です この animation はこちらの値に書いた 内容で画像の移り変わりのアニメーションを― 表示させる事が出来ます 今回は fade としていますね この様に書く事で画像の移り変わりの際に 現在 表示されている画像を― フェードアウトさせて そして 次に表示させる画像を― フェードインさせる事が出来ます そして 最後の interval ですが これは画像を切り替える間隔を― 指定する事が出来ます 今回は 5000 と書いていますね これは 5000 ミリ秒を表します 要するに 5 秒です この様に書く事で 5 秒経ったら 次の画像を表示させるといった形になります それでは この状態でこちらの index.html ファイルを― ブラウザで開いてどのように表示されるか 確認してみたいと思います はい これが index.html ファイルを ブラウザで開いた状態です この様に画像の切り替わりの際には フェードイン フェードアウトの効果が― 掛かっているのが分りますね また 画像が切り替わるタイミングというのは それぞれの画像を 5 秒表示してから― 次の画像に切り替わる といった形に変化しています この様に jKit プラグインを使えば スライドショーの細かい動作も― 調製する事が可能となっています 以上でレッスンは終了です 今回は jKit プラグインを使った スライドショー機能を実装する為の― 設定項目について解説致しました 以降のレッスンでは このスライドショー機能に― 画像送りをする為の 次の画像 前の画像ボタンを― 実装する方法について解説していきますので そちらも合わせてご覧下さい

WebデザイナーのためのjQuery実践講座

jQueryとはJavaScriptを簡単かつ便利に扱えるJavaScriptライブラリです。このコースではプログラミングの知識はそれほどないけれど日々仕事でHPを制作しているWebデザイナーの方や趣味で自分のサイトを運営している方などを対象に、jQueryとプラグインを利用してさまざまな機能や効果を手軽にサイトに実装する方法を学びます。

2時間04分 (34 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月29日

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

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

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