[ プログラミング ] 背景画像(backgroung-image)のスライドショーをjQueryで作る方法

背景画像のスライドショーのjQueryプラグインを配布しております。

背景画像のスライドショーを使用したHTML5テンプレートを配布しております。

背景画像をスライドショー形式で表示させたい場合、フルスクリーンのものはたくさんプラグインがあるのですが、例えば、ヘッダーのみをスライドショー形式にしたいというプラグインはほどんど見当たりません。私が探せていないだけかもしれませんが。

唯一、よさ気なプラグインがこちら。

以前、Chromeで見た時に不具合があったのですが、今見たら直ってました。プラグイン自体に変更はなさそうなので、Chromeのバージョンが上がったことで不具合が直ったのかもしれません。

昔、画像(img)をスライドショーさせるプラグインを作ったのですが、それを改造して、背景画像をスライドショーさせてみたいと思います。

デモは以下からどうぞ。

DOMO

特にスマートフォンで、viewportを指定したいときなどにレイアウト崩れを起こさずに表示してくれるので便利です。一応、DEMOページのQRコードも貼っておきますね。

QRコード

HTML5でコーディングしています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>デモ</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=800">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div id="slideshow">
   <ul>
      <li><img src="images/photo01.jpg" alt=""></li>
      <li><img src="images/photo02.jpg" alt=""></li>
      <li><img src="images/photo03.jpg" alt=""></li>
   </ul>
</div><!-- /#slideshow -->
<div id="main">
   <h2>ここはメインコンテンツです</h2>
   <p>
   ここはメインコンテンツです。<br>
   …
   ここはメインコンテンツです。
   </p>
</div><!-- /#main -->
<div style="position:absolute;right:20px;bottom:20px">photo by <a href="http://www.pakutaso.com/">PAKUTASO</a></div>
</body>
</html>

Java Script

$.fn.autoChange = function(config) {
   // オプション
   var options = $.extend({
      effect  : 'fade',
      type    : 'repaet',
      timeout : 3000,
      speed   : 1000
   }, config);

   return this.each(function() {

      // カウンター初期化
      var current = 0;
      var next = 1;

      // 指定した要素の子要素を取得
      var element = $(this).children();

      // 要素を非表示にする
      $(element).hide();

      // img要素を非表示にする
      $('img', element).hide();

      // 最初の要素を表示にする
      $(element[0]).show();

      // 画像パス取得・背景画像としてセット
      for (i=0; i < element.length; i++) {
         var src = [];
         src[i] = $('img', element[i]).attr('src');
         $(element[i]).css('background-image','url('+src[i]+')');
      }

      // 要素の横幅をセット
      elementWidth();

      // ウィンドウをリサイズしたときに要素の横幅を再計算
      $(window).resize(function() {
         elementWidth();
      });

      // 要素の横幅をウィンドウサイズに合わせる
      function elementWidth() {
         var windowWidth = $(window).width();
         element.css('width',windowWidth);
      }

      // 要素を切り替えるスクリプト
      var change = function(){
         // フェードしながら切り替える場合
         if (options.effect == 'fade') {
            $(element[current]).fadeOut(options.speed);
            $(element[next]).fadeIn(options.speed);

         // スライドしながら切り替える場合
         } else if  (options.effect == 'slide') {
            $(element[current]).slideUp(options.speed);
            $(element[next]).slideDown(options.speed);
         }

         // リピートする場合
         if (options.type == 'repeat') {
            if ((next + 1) < element.length) {
                current = next;
                next++;
            } else {
                current = element.length - 1;
                next = 0;
            }
         }

         // 最後の要素でストップする場合
         if (options.type == 'stop') {
            if ((next + 1) < element.length) {
                current = next;
                next++;
            } else {
                return;
            }
         }
      };

      // 設定時間毎にスクリプトを実行
      var timer = setInterval(function(){change();}, options.timeout);

   });
};

// 自動切り替えする要素の設定
$(function() {
   $('#slideshow ul').autoChange({effect : 'fade',type : 'repeat',timeout: 5000,speed : 2000});
});

CSS

#slideshow {
   position:relative;
   width:100%;
   height:300px;
}
#slideshow li {
   position:absolute;
   height:300px;
   margin:0;
   padding:0;
   background-position:center top;
   background-repeat:no-repeat;
}

画像の場合と同じで、HTMLファイルに、スライドしたい画像をimgタグで記述します。画像バージョンと違うところは、あくまで背景画像なのでリンク先がないことです。

jQueryも、要素を切り替えるスクリプトのところは、画像バージョンと全く同じです。違うところは、imgタグを非表示にして背景画像として設定しなおしている点です。

あと、CSSで横のサイズを100%、縦のサイズをpx単位で設定する必要があります。