2015-11-08

javascript：スライドショー（jQueryプラグイン）

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

サンプル


◆html

1行目：
HTML5であることを宣言
8行目：
jQueryを読み込む。
9行目：
jQuery.quickSlideshow.js を読み込む。
15-30行目：
スライドショーを構成する画像のurlとキャプション
33行目：
jQueryプラグインquickSlideshowを呼びだし。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <link rel=icon href="http://www.geocities.jp/winchester_cathedral_nostalgy/_img/BlueSky_favicon.png" sizes="16x16" type="image/png">
  6.  
  7. <title>quickSlideShow</title>
  8. <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  9. <script src="jQuery.quickSlideshow.js"></script>
  10.  
  11. <script>
  12.  
  13. $(function() {
  14.  
  15.  var photos = [{
  16.   url: "http://farm6.static.flickr.com/5052/5503321609_d9e9571af9_z.jpg",
  17.   caption: "いすみ鉄道"
  18.  },{
  19.   url: "http://farm6.static.flickr.com/5013/5546595586_6f6966e6ca_z.jpg",
  20.   caption: "いすみ（蛍）"
  21.  },{
  22.   url: "http://farm6.static.flickr.com/5263/5616428686_82610176c3_z.jpg",
  23.   caption: "飯給"
  24.  },{
  25.   url: "http://farm6.static.flickr.com/5251/5503249326_6b1c255324_z.jpg",
  26.   caption: "いちはら市民の森"
  27.  },{
  28.   url: "http://farm6.static.flickr.com/5136/5546824600_af97b41fe5_z.jpg",
  29.   caption: "君ヶ浜から見た犬吠崎灯台"
  30.  }];
  31.  
  32.  
  33.  $('#slideshow').quickSlideshow( photos );
  34.  
  35.  
  36. });
  37.  
  38. </script>
  39.  
  40.  
  41. </head>
  42. <body>
  43. <div style="text-align: center; width: 100%; margin: 0; padding: 0;">
  44. <div id="slideshow"></div>
  45. </div>
  46. </body>
  47. </html>

◆jQueryプラグイン(jQuery.quickSlideshow.js)



  1. (function($) {
  2.  
  3.  $.fn.quickSlideshow = function(photos, options) { 
  4.   return this.each(function() { 
  5.    new $.quickSlideshow(this, photos, options);
  6.   });
  7.  };
  8.  
  9.  var defaults = {
  10.   interval: 3000,
  11.   animateTime: 1000
  12.  };
  13.  
  14.  $.quickSlideshow = function(elements, photos, options) {
  15.  
  16.   this.options = $.extend({}, defaults, options); // デフォルトオプションと渡されたオプションのマージ
  17.  
  18.   this.$id = $(elements);
  19.   var self = this;
  20.   $.each( photos, function(i){
  21.    self.$id.append(
  22.     $('<div>').css({
  23.      width: "100%",
  24.      textAlign: "center"
  25.     }).append(
  26.      $('<img>').attr("src", photos[i].url) // img要素のsrc属性にphoto[i]を設定する。
  27.     ).append(
  28.      $('<p>').html(photos[i].caption)  // p要素の中身をcaption[i]に設定する。
  29.     )
  30.    );
  31.   });
  32.  
  33.   this.$id.find('div').each(function(){
  34.    $(this).css({
  35.      position: "absolute", // ボックスの配置を絶対位置に設定する。
  36.      opacity: 0.0 // div要素の透過度を0.0（透明）に設定する。
  37.     });
  38.   });
  39.  
  40.   this.current = 0;
  41.   this.next = 1;
  42.   this.$id.find('div').eq(this.current)
  43.   .css({
  44.    opacity: 1.0 // div要素の透過度を1.0（不透明）に設定する。
  45.   });
  46.  
  47.   this.timer = setInterval(function() { // slideSwitch()を時間intervalごと繰り返す。
  48.    var tmp = self.next;
  49.    self.$id.find('div').eq(self.next)
  50.    .css({opacity: 0.0})
  51.       .animate({opacity: 1.0}, self.options.animateTime, function() { // 次の要素の透過度を1.0にアニメーションする。
  52.           self.next++;; // activeな要素からclass='active'を削除
  53.     if (self.next >= self.$id.find('div').length) { self.next = 0; }
  54.       });
  55.    self.$id.find('div').eq(self.current)
  56.    .animate({opacity: 0.0}, self.options.animateTime, function() { // 今の要素の透過度を0.0にアニメーションする。
  57.      self.current = tmp;
  58.    });  
  59.   
  60.   }, self.options.interval );
  61.  
  62.  };
  63.  
  64. })(jQuery);


参考にしたページ

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



以上
投稿者 時刻: