- ベストアンサー
jqueryの呼び出し場所とbxSliderの使用方法
- jqueryの呼び出し場所はHTMLのhead内に記述します。また、bxSliderを使用するためには、bxSliderのファイルをダウンロードし、jsのファイルをローカルのフォルダに保存する必要があります。HTMLのhead内でダウンロードしたjsファイルを読み込み、bxSliderの呼び出しを行います。
- bxSliderの呼び出しは以下のように記述します。$(document).ready(function(){ $('.bxslider').bxSlider(); });このコードはHTMLのどこにでも記述することができますが、通常はbodyタグの終了直前に記述します。
- jqueryはローカルで作業している場合でも動作確認が可能です。ただし、jqueryを使用して外部のファイルやAPIにアクセスする場合は、サーバー上にアップロードしてから動作確認する必要があります。
- kkkana
- お礼率87% (64/73)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
記述箇所はどこでも良いはずですが、特定のページでのみbxsliderを使うのなら、そのページの<head>内に記述するのが一般的です。 呼び出すというのは、<body>部分のスライドショーにしたい画像のリスト部分のことを言います。 ・jquery.js （jQueryのファイル） ・jquery.bxslider.js （bxsliderのjsファイル） ・jquery.bxslider.css（bxsliderのcssファイル） この3つがあればローカルでも動作しますよ。 jQueryファイルはバージョンによっては動作しないことがあるかもしれません。ご注意ください。 ●記述例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!--- ↓ここからhead部分↓---> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <script type="text/javascript" src="jquery-1.8.1.js"></script> <script type="text/javascript" src="jquery.bxslider.js"></script> <!--- ↓ここがbxsliderを呼び出す記述↓---> <script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxSlider({ auto: true }); }); </script> <!--- ↓bxsliderのcssファイル スライダー部分のレイアウトが記述↓---> <link href="jquery.bxslider.css" rel="stylesheet" /> </head> <!--- ↑ここまでhead部分↑---> <!--- ↓ここからbody部分↓---> <body> <!--- ↓ここがbxsliderの画像↓---> <ul class="bxslider"> <li><img src="pic1.jpg"></li> <li><img src="pic2.jpg"></li> <li><img src="pic3.jpg"></li> <li><img src="pic4.jpg"></li> </ul> <!--- ↑ここまでbxslider部分↑---> </body> <!--- ↑ここまでbody部分↑---> </html> ざっくり説明すると、body内に <ul> と <li> タグで画像を並べたら、<ul>タグにクラス「.bxslider」をつけて、それを $(document).ready(function(){ $('.bxslider').bxSlider(); }); と呼び出すことでスライダーとして動作するというものです。 「 $('.bxslider')」の部分には<ul>タグにつけたクラス名が入ります。 <ul>タグにつけたクラス名を変更したときは、この呼び出し部分の記述も同様に変更します。 「auto: true」はオプションです。 自動でスライドさせたいときにつけます。 bxsliderの配布元サイトにcssファイルを含めたファイルが一式あったように思います。 そちらは参考にされましたか？ オプション（いろいろな動作）についてもサンプルがありますよ。 ●配布元 http://bxslider.com/
お礼
わかりやすく説明していただきありがとうございます！！！ 出来ましたっ！感激です！ オプションも試してみたら出来ました！ 本当にありがとうございます！