「次の画像」「前の画像」ボタンの実装 - jQueryのチュートリアル

このレッスンでは スライドショー機能に 画像送りをする為の次の画像― 前の画像ボタンを実装する方法について 解説していきます まずは ダウンロードしてきた こちらの slideshow-arrow― というフォルダーの中に入っている こちらの index.html ファイル― そして css フォルダーの中に入っている こちらの style.css ファイル― そして 更にこちらの js フォルダーの中に入っている― こちらの javascript.js ファイルをエディターで開いて下さい そして これがそれらのファイルを 開いた状態です これらのファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう 以前のレッスンでご説明した通り― こちらのスライドショー部分の html タグの中には― 次の画像へ　若しくは前の画像へ を表すようなボタンの配置は行っていません この次の画像へ　若しくは前の画像へ のボタンを作成する為には― jKit プラグインのスライドショー機能の 設定項目で行う必要があります それでは その部分を 確認してみたいと思います こちらの javascript.js ファイルを開きます そして 今回　注目して頂きたい部分は こちらの部分ですね 前回のレッスンで設定した設定項目の下に 更に二つの設定項目を付けています 一つは prevhtml そして もう一つは nexthtml ― という設定項目です これらはそれぞれ prevhtml は 前の画像を表示させる為の html タグ― そして　もう一つの nexthtml は 次の画像を表示させる為の html タグ― を表しています 今回はこちらの部分に 画像ファイルを設定しています 前の画像を表示させる html には 左矢印の画像　そして― 次の画像を表示させる為の html には 右矢印の画像を設定しています この様に設定してあげる事で 次の画像へのボタンや― 前の画像へのボタンを自由に デザインしてあげる事が可能です ただ これだけでは少し不十分と なってしまいますので― 後は CSS を使って 綺麗に調節してあげましょう こちらの右側部分の css ファイルを見てみましょう そして 注目して頂きたい部分は こちらのスライドの中にある― こちらの部分となります 実は こちらで設定した このイメージタグですが― この様に設定する事によって jKit プラグインが自動で― このイメージタグを挟むように a タグを生成してきます そして その a タグには それぞれクラスが付いてきて― 一つは jkit-carousel-prev というもの これは前の画像へボタンに付加されます そして もう一つは jkit-carousel-next これは次の画像へボタンに付加されます これらの a タグとクラスが 自動的にこちらのイメージタグに― 追加されてきますので　それらに対して CSS でスタイルを調節してあげます ここまで出来れば　スライドショーの完成です それでは index.html ファイルを ブラウザで開いてどの様に表示されてくるか― 確認してみましょう はい これが index.html ファイルをブラウザで開いた状態です この様に次の画像へ　そして 前の画像へのボタンがきちんと― 追加されているのが分りますね きちんとこちらから 指定した画像で表示されています それでは クリックしてみましょう まずは 前の画像へ すると このように逆順で 画像を表示してくれますね そして 次に次の画像へ この様にクリックする事で ドンドンと次の画像を表示してくれます これで jQuery と jKit プラグインを使った― スライドショー機能の実装は完了となります 以上でレッスンは終了です 今回はスライドショー機能に 画像送りをする為の― 次の画像 前の画像ボタンを 実装する方法について解説致しました 以降のレッスンからは jQuery と jKit プラグインを使って― タブ切替機能を実装する方法について 解説していきますので― そちらも合わせてご覧下さい