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

今すぐコースを受講しましょう

今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。

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

jQuery&jKitで「スライドショー機能」を実装する - jQueryのチュートリアル

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

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

このレッスンでは 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 プラグインの機能の中には スライドショーを作る機能が― 二つ存在しています 一つはその名の通り スライドショーという機能 そして もう一つは 今回利用している カルーセルという機能の物です 今回 なぜこのカルーセルという機能を 利用しているかと言うと― 今回のスライドショーには次の画像へ…

目次