2013-11-08

javascript：スライドショー（画像ファイルをhtmlに記載する場合）

画像とキャプションを一緒にスライドショーできます。

サンプル


◆html

1行目：
HTML5であることを宣言
6行目：
jQueryを読み込む。
7行目：
slideshowImgInHtml.js を読み込む。
24-30行目：
スライドショーを構成する部分
24行目：
div要素、id="slideshow" とする。
data-interval="3000"：切り替え間隔を3000msに設定
data-animate-time="500"：切り替え時のアニメーションの時間を500msに設定
25-29行目：
画像ファイルとキャプションを設定
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>SlideShow</title>
  6. <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  7. <script src="slideshowImgInHtml.js"></script>
  8.  
  9. <style>
  10. #slideshow {
  11.  width:800px; 
  12.  margin:0 auto;
  13.  text-align: center; 
  14. }
  15.  
  16. #slideshow p {
  17.  font: bold 16px arial,sans-serif;
  18.  text-align: center; 
  19. }
  20. </style>
  21. </head>
  22. <body>
  23.  <div id="wrap">
  24.      <div id="slideshow" data-interval="3000" data-animate-time="500">
  25.    <div><img src="http://farm6.static.flickr.com/5052/5503321609_d9e9571af9_z.jpg"/><p>いすみ鉄道</p></div>
  26.    <div><img src="http://farm6.static.flickr.com/5013/5546595586_6f6966e6ca_z.jpg"/><p>いすみ（蛍）</p></div>
  27.    <div><img src="http://farm6.static.flickr.com/5263/5616428686_82610176c3_z.jpg"/><p>飯給</p></div>
  28.    <div><img src="http://farm6.static.flickr.com/5251/5503249326_6b1c255324_z.jpg"/><p>いちはら市民の森</p></div>
  29.    <div><img src="http://farm6.static.flickr.com/5136/5546824600_af97b41fe5_z.jpg"/><p>君ヶ浜から見た犬吠崎灯台</p></div>
  30.   </div>
  31.     </div>
  32. </body>
  33. </html>

◆javascript(slideshowImgInHtml.js)

1-3行目：
ページを読み込んだ時に実行する関数。関数 slideShow を実行する。

6-52行目：関数 slideShow()
スライドショーを実行する。
8-9行目：
スライドショーの切り替え間隔（interval）と切り替え時のアニメーションの時間（animateTime）の
初期値を設定
11-15行目：
html で設定したdata-interval, data-interval の値を interval, animateTime に代入。
data-interval, data-interval がなければ、初期値の値を使う。
17-22行目：
子要素 div のスタイルを設定する。（position: "absolute" を指定しないと、
スライドショーが切り替わるたびに表示位置がずれてしまう。）
24-29行目：
子要素 div の最初の要素を active 、不透明にする（表示する）。
31行目：
一定期間（interval）ごとに関数 slideSwitch()を実行する。

33-50行目：関数 slideShow() のインナー関数 slideSwitch()
active な要素を透明にアニメーションして、次の要素を不透明にアニメーションする。
アニメーション時間は animateTime。
ローカル変数 animateTime を使えるようにインナー関数にしてある。
（なぜか、function slideSwitch() {  } では、関数が定義されない。
31行目の setInterval でエラーが発生する。）
35-40行目：
active な要素を $active に代入する。active な要素の次の要素を $next に代入する。
次の要素がなければ（active な要素が最後の要素なら）、最初の要素を $next に代入する。
42-47行目：
$next に代入された要素をアニメーションで不透明にする（表示する）。
active な要素を active でなくす。
48行目：
$active に代入された要素をアニメーションで透明にする（非表示にする）。

  1. $(function() {
  2.  slideShow();
  3. });
  4.  
  5.  
  6. function slideShow() {
  7.  
  8. var interval = 3000;
  9. var animateTime = 1000;
  10.  
  11.  var $slideshow = $('#slideshow');
  12.  var $interval = $slideshow.data('interval');
  13.  if($interval) interval = Number($interval);
  14.  var $animateTime = $slideshow.data('animate-time');
  15.  if($animateTime) animateTime = Number($animateTime);
  16.  
  17.  $('#slideshow div').each(function(){
  18.   $(this).css({
  19.     position: "absolute", // ボックスの配置を絶対位置に設定する。
  20.     opacity: 0.0 // div要素の透過度を0.0（透明）に設定する。
  21.    });
  22.  });
  23.  
  24.  $('#slideshow div:first')
  25.   .addClass('active') // 最初の要素をactiveに設定する。
  26.   .css({
  27.    opacity: 1.0 // div要素の透過度を1.0（不透明）に設定する。
  28.   })
  29.  ;
  30.  
  31.  setInterval( "slideSwitch()", interval ); // slideSwitch()を時間intervalごと繰り返す。
  32.  
  33.  slideSwitch = function() {
  34.  
  35.   var $active = $('#slideshow div.active');
  36.   if ($active.next().length) {
  37.    $next = $active.next(); // activeな要素の次の要素を$nextに定義
  38.   } else {
  39.    $next = $('#slideshow div:first'); // nextがなければ最初の要素を$nextに定義
  40.   }
  41.  
  42.   $next
  43.    .css({opacity: 0.0})
  44.       .addClass('active')
  45.       .animate({opacity: 1.0}, animateTime, function() { // 次の要素の透過度を1.0にアニメーションする。
  46.                          $active.removeClass('active'); // activeな要素からclass='active'を削除
  47.       });
  48.   $active.animate({opacity: 0.0}, animateTime, function() {});  // 今の要素の透過度を0.0にアニメーションする。
  49.  
  50.  }
  51.  
  52. }


参考にしたページ

スライドショー作り方（A Simple jQuery Slideshow）



以上
投稿者 時刻:
ラベル: