[ プログラミング ] jQueryでウィンドウ幅に合わせてサイズが可変するスライドショー

【2014/01/06更新】
ウィンドウサイズを変更した場合、リロード(onload)しないと画像の高さが合わないようになっていたので、随時リサイズ(resize)するように変更しました。

例えば、リキッドレイアウトやレスポンシブデザインにした場合、テンプレートの横幅が変わるので、スライドショーも合わせて可変にする必要があります。

姉妹サイトで配布しているスライドショーを可変レイアウトに対応させてみました。

DOMO

最低限のソースコードは以下のとおりです。

HTML

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<title>サンプル</title>
<script type="text/javascript">
$(function() {
   $('#headImage ul').autoChange({effect : 'fade', type : 'repeat', timeout: 5000, speed : 2000});
});
</script>
</head>
<body>
   <div id="headImage">
      <ul>
         <li><img src="images/icatch01.jpg" alt="" /></li>
         <li><img src="images/icatch02.jpg" alt="" /></li>
         <li><img src="images/icatch03.jpg" alt="" /></li>
         <li><img src="images/icatch04.jpg" alt="" /></li>
      </ul>
   </div><!-- /#headImage -->
</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 elementP = $(this);

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

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

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

      // 画像の高さ分、表示領域を確保
      function elementHeight() {
         $(elementP).height($(element).height());
      };

      // 要素の高さを取得
      elementHeight();

      // ウィンドウをリサイズした際に、要素の高さを再取得
      $(window).on('resize', function(){
         elementHight();
      });

      // 要素を切り替えるスクリプト
      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);
   });
};

CSS

#headImage {
	overflow:hidden;
	position:relative;
}

#headImage ul {
	margin:0;
	padding:0;
}

#headImage li {
	position:absolute;
	margin:0;
	padding:0;
	background:#fff;
	list-style:none;
}

オプション

スライドショーの種類や繰り返し回数、エフェクトにかかる時間等をカスタマイズできます。

スライドショーの種類

画像が切り替わるエフェクトは、「フェード(fade)」と「スライド(slide)」の二種類あります。

Java Script

effect : 'fade'
effect : 'slide'

繰り返し回数

「繰り返し表示する」タイプと「繰り返しをせず、最後の要素が表示されて終わる」タイプの二種類があります。

Java Script

type : 'repeat'
type : 'stop'

画像を表示する時間

画像を表示する時間は単位をミリ秒(ms)で指定します。3秒であれば3000と記述します。

Java Script

timeout: 3000

エフェクトにかかる時間

エフェクトにかかる時間は単位をミリ秒(ms)で指定します。'slow'、'normal'、'fast'、というようにも設定できます。

Java Script

speed : 1000
speed : 'slow'
speed : 'normal'
speed : 'fast'