[jQuery]簡単＆シンプル！スライドショーの作成方法

スポンサーリンク
css
2020.05.10

jQuery を使ったスライドショー

webサイトにスライドショーを実装します。

まずはサンプルをご覧ください。↓

slideshow sample
www.take-note.net

5枚の写真が、3秒ごとに入れ替わります。滑らかな仕上がりになっているのがご確認できるかと思います。

jQueryライブラリの読み込み

jQueryを使って実装していきます。コピペで使えるので簡単です！

まずは、jQueryライブラリを読み込みます。

GoogleのCDNにホストされているjQueryのファイルを読み込みます。

↓　こちらのコードを、<head>タグ内に記述します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

たった1行です！

様々な読み込み方法を試しましたが、この方法がおすすめです！

スライドショーのサンプルコード

↓　このコードを<body>タグの中に記述します。

<script>
    function slideSwitch() {
    var $active = $('#slideshow img.active');
  
    if ( $active.length == 0 ) $active = $('#slideshow img:last');
  
    var $next =  $active.next().length ? $active.next()
       : $('#slideshow img:first');
  
    $active.addClass('last-active');
  
    $next.css({opacity: 0.0})
       .addClass('active')
       .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
       });
  }
  
  $(function() {
    setInterval( "slideSwitch()",3000 );
  });
  </script>

外部ファイルで読み込むこともできますが、

今回は分かりやすくするために直接記述にしてあります。

以下のコードですが、「3000」というのは3000ミリ秒なので、

3秒ごとに写真が入れ替わる設定です。5秒にしたい場合は「5000」に

設定するなどしてください。

 $(function() {
    setInterval( "slideSwitch()",3000 );
  });

スライドショー用の画像を列挙するHTMLを記述

↓　このコードを<body>タグ内に記述します。

 <div id="slideshow">
    <img src="sample1.jpg" class="active">
    <img src="sample2.jpg"> 
    <img src="sample3.jpg">
    <img src="sample4.jpg">
    <img src="sample5.jpg">
</div>

スライドショーとして表示したい画像を列挙します。

お持ちの画像ファイル名を記述してください。

分かりやすくするため、「sample1」～「sample5」にしてあります。

↓　ここで重要なのが、idでslideshow指定がしてあるのと、

「sample1」のclass のactive指定です。

 <div id="slideshow">
    <img src="sample1.jpg" class="active">

ここを変えてしまうと、CSSが反映されませんのでご注意を。

スライドの挙動を調整するCSSを記述

CSSは外部ファイルでも指定できますが、

今回は分かりやすくするため、下記のコードを<body>タグ内に記述します。

<style>
#slideshow {
   position: relative;
   overflow   : hidden;
   width:  510px; /* 画像の横幅に合わせて記述 */
   height: 360px; /* 画像の高さに合わせて記述 */
   margin     : 30px auto;      
   background : #f2f2f2;
   border: solid 1px gray;
}
#slideshow img {
   position: absolute;
   z-index: 8;
   opacity: 0.0;
   width      : inherit;
   height     : inherit;
}
#slideshow img.active {
   z-index: 10;
   opacity: 1.0;
}
#slideshow img.last-active {
   z-index: 9;
}
 </style>

↓　active指定をした1枚目の画像が、1番上に来るようになっており、

透過せずはっきり見えます。

#slideshow img.active {
   z-index: 10;
   opacity: 1.0;
}

slideshow idですが、上下のmarginを30px, 左右のmarginをautoに

設定してあるので、

画像が真ん中に来るようになっており、上から30px下がっています。

背景色や、外枠もお好みで変えましょう。

画像の大きさに合わせて、widthとheightを調整してください。↓

 #slideshow {
   position: relative;
   overflow   : hidden;
   width:  510px; /* 画像の横幅に合わせて記述 */
   height: 360px; /* 画像の高さに合わせて記述 */
   margin     : 30px auto;      
   background : #f2f2f2;
   border: solid 1px gray;
}

いかがでしたか？

簡単で、コードも短くシンプルです。

jQueryを使ったスライドショーを是非実装してみてください。

HTMLとCSSだけ！というスライドショーもよく見かけますが、

IEでanimationプロパティが動かなかったりと、様々な問題が出てきますので、

スライドショーの実装はjQueryがおすすめです！

スポンサーリンク

コメント