2017/09/034JavaScriptで簡単にスライドショーを実装するなら「jQuery」と「bxslider」の組み合わせが、個人的には一番簡単でおすすめです。ここでは、その実装方法を紹介します。手順1.jQueryをダウンロードします。jQueryから最新版のjQueryをダウンロードします。1.11.2」をクリックして、「jquery-1.11.2.min.js」ファイルをダウンロードします。手順2.bxSliderをダウンロードします。bxSliderの右上「↓Download」からZIPファイルをダウンロードして解凍します。解凍したフォルダの中身は次の通りです。手順3.必要なファイルとフォルダだけを、同じ階層にコピーします。手順1でダウンロードした「jquery-1.10.2.min.jp」をコピーします。手順2でダウンロードしたbxSliderのZIPを解凍したフォルダから「jquery.bxslider.css」「jquery.bxslider.js」「imagesフォルダ」をコピーします。フォルダの中身は次のようになります。手順4.imgフォルダを作成して、スライドショーに使う画像ファイルを保存します。今回はsample1.jpg、sample2.jpg、sample3.jpg、sample4.jpgをスライドショーに使います。手順5.HTMLを作成します。同階層に次のindex.htmlを作成します。あるhtmlファイルに実装したい場合は、bodyタグ内をコピーして使ってください。src=’img/sample4.jpg’></li></ul></body></html>bodyタグ内の最初の3行:jQuery、bxSlider、CSSを読み込みます。“text/javascript”>以降でスライドショーの設定をします。今回は自動再生するために、bxsliderのオプション「auto」をtureにし、「slidewidth」でスライドショーの幅を600pxに固定しています。リストのULタグのクラス名を、スライドショーを実行するため「bxslider」に指定します。このliにスライドする画像ファイルを記述します。オプションなしの完成イメージjQuery+bxsliderのサンプルbxsliderのオプションを使うこのままでも十分スライドショーとして機能していますが、実はスライドの下部が見きれています。枠のシャドーをとってシンプルにしたい場合もあると思います。そこで、オプションを設定します。今回は次の6点を変更します。スライドの切り替えをフェードにする。pagerを「●」ではなく画像にする。レスポンシブデザインを無効にする。スライドにリンクを貼る。スライド周りのシャドー削除する。※CSSを編集します。pagerの画像を近づける。※CSSを編集します。上記1~4の設定です。BODYタグ内に記述します。4行目:フェードにするとスライドの位置がずれるので、CSSでpadding-leftを0にします。8行目から15行目:オプションの設定です。エフェクトをフェードに変更、ページャーを画像にする、レスポンシブデザインをfalseとして適用しない、などです。詳細はソースのコメントおよび下記オプション一覧を参考にしてください。20行目から22行目:ULタグのclass「bxslider」のliがリンクになります。href内にURLを指定します。上記5と6の設定です。ファイル「jquery.bxslider.css」を修正します。クラス「.bx-wrapper」のmarginを書き換え、pagerの画像をスライドに近づけます。.bx-viewport」をコメントアウトして、スライドの枠っぽいシャドーを消します。基本的にオプションを使った方法でスライドショーを実行してることが多いのですが、まれにページャーをクリックしてからもスライドショーを継続したい場合があります。ここではその設定を紹介します。次のようにfunctionを修正します。3行目で変数objを設定します。オプションの最後に行を追加し、startAutoで自動再生を呼び出すように設定します。完成イメージjQuery+bxSliderのサンプル|オプション適用編|クリックしてからも自動再生おすすめオプション設定一覧おすすめのbxSliderのオプションです。HTMLのJavaScriptのfuction内に記述します。スライドが切り替わる早さ。