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

jQuery&jKitで「スライドショー機能」を実装する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQueryとjKitプラグインを使って、実際に「スライドショー機能」を実装する方法について、解説致します。
講師:
04:30

字幕

このレッスンでは jQuery と jKit プラグインを使って― 実際にスライドショー機能を実装する 方法について解説していきます まずは ダウンロードしてきた こちらの slideshow-js ― というフォルダーの中に入っている こちらの index.html ファイルと― そして こちらの js フォルダーの中に 入っているこちらの― javascript.js ファイルを エディターで開いて下さい そして これらがそれらのファイルを 開いた状態となっています 左側には index.html ファイル そして 右側には― javascript.js ファイルを 開いた状態です これらのファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう まずはこちらの index.html ファイルの方からみていきましょう こちらのファイルの中の― こちらの部分ですね こちらの ID slide が付いた div タグの部分 この部分を前回のレッスンで コーディングしました 今回はこちらの部分に対して jQuery と― jKit プラグインを使って 実際にスライドショーの機能を 付けたいと思います それでは こちらに表示されている javascript.js ファイルの方に― 目を移してみましょう そして 注目して頂きたい部分は こちらの部分ですね それでは 順番にみていきます まずは $ と書いて その括弧の中に div#slide そして― その直下にある div と書きます この様に書くことで スライドショー機能を付けた要素を― 指定できます そして その後に .jKit と書いて 括弧 括弧閉じるの セミコロン この jKit というのは jKit プラグインの機能ですね そして その括弧の中に jKit の中の 実装したい機能を指定してあげます 今回は carousel と書いていますね 実は jKit プラグインの機能の中には スライドショーを作る機能が― 二つ存在しています 一つはその名の通り  スライドショーという機能 そして もう一つは 今回利用している カルーセルという機能の物です 今回 なぜこのカルーセルという機能を 利用しているかと言うと― 今回のスライドショーには次の画像へ もしくは前の画像へといった― ボタンが付いていますね この機能は jKit の中のスライドショー という機能の中には含まれていなくて― こちらのカルーセルという機能の方に 含まれています ですので 今回はこのカルーセルという機能を 選択している訳です さて この一文を書く事によって 実はスライドショーの実装は完了している― といっても過言ではありません 非常に簡単ですね ただ一点注意して頂きたいのは こちらのスライドショー機能を付ける要素 こちらの要素は必ずこの画像が 含まれているすぐ上の要素 今回はこちらの div タグですね こちらを指定してあげるようにして下さい 決してこちらの ID slide が付いた 大枠の div タグを指定する― という形ではありませんので この点だけ覚えておくようにして下さい それでは 一度この状態で この index.html ファイルを― ブラウザで開いてみましょう はい これが index.html ファイルをブラウザで開いた状態です この様に自動で画像が 変わっていっているのが分りますね この様にスライドショーの機能が 実装された形となっています ただ 少しばかり調整が必要な部分があります 例えば 良く見ると ここに矢印 が付いていますね この矢印ですが 次の画像を表示する為の 矢印と そして 前の画像を表示させる為の― 矢印ですが この状態ですと 非常に見難いですね また このスライドショーの画像の 切り替わりのエフェクトも― 少し不自然な気がします ですので 以降のレッスンでは こういったスライドショーの― 微調整のやり方について みていきたいと思います 以上でレッスンは終了です 今回は jQuery と  jKit プラグインを使って― 実際にスライドショー機能を実装する 方法について解説致しました 以降のレッスンでは  この jKit プラグインを使った― スライドショー機能を実装する為の 設定項目について解説していきますので― そちらも合わせてご覧下さい

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

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

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

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

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

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