2015-11-08

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

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

サンプル


◆html

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel=icon href="http://www.geocities.jp/winchester_cathedral_nostalgy/_img/BlueSky_favicon.png" sizes="16x16" type="image/png">

<title>quickSlideShow</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jQuery.quickSlideshow.js"></script>

<script>

$(function() {

 var photos = [{
  url: "http://farm6.static.flickr.com/5052/5503321609_d9e9571af9_z.jpg",
  caption: "いすみ鉄道"
 },{
  url: "http://farm6.static.flickr.com/5013/5546595586_6f6966e6ca_z.jpg",
  caption: "いすみ（蛍）"
 },{
  url: "http://farm6.static.flickr.com/5263/5616428686_82610176c3_z.jpg",
  caption: "飯給"
 },{
  url: "http://farm6.static.flickr.com/5251/5503249326_6b1c255324_z.jpg",
  caption: "いちはら市民の森"
 },{
  url: "http://farm6.static.flickr.com/5136/5546824600_af97b41fe5_z.jpg",
  caption: "君ヶ浜から見た犬吠崎灯台"
 }];
 

 $('#slideshow').quickSlideshow( photos );
 

});

</script>


</head>
<body>
<div style="text-align: center; width: 100%; margin: 0; padding: 0;">
<div id="slideshow"></div>
</div>
</body>
</html>

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



(function($) {

 $.fn.quickSlideshow = function(photos, options) { 
  return this.each(function() { 
   new $.quickSlideshow(this, photos, options);
  });
 };

 var defaults = {
  interval: 3000,
  animateTime: 1000
 };
 
 $.quickSlideshow = function(elements, photos, options) {
 
  this.options = $.extend({}, defaults, options); // デフォルトオプションと渡されたオプションのマージ
 
  this.$id = $(elements);
  var self = this;
  $.each( photos, function(i){
   self.$id.append(
    $('<div>').css({
     width: "100%",
     textAlign: "center"
    }).append(
     $('<img>').attr("src", photos[i].url) // img要素のsrc属性にphoto[i]を設定する。
    ).append(
     $('<p>').html(photos[i].caption)  // p要素の中身をcaption[i]に設定する。
    )
   );
  });
 
  this.$id.find('div').each(function(){
   $(this).css({
     position: "absolute", // ボックスの配置を絶対位置に設定する。
     opacity: 0.0 // div要素の透過度を0.0（透明）に設定する。
    });
  });
 
  this.current = 0;
  this.next = 1;
  this.$id.find('div').eq(this.current)
  .css({
   opacity: 1.0 // div要素の透過度を1.0（不透明）に設定する。
  });
 
  this.timer = setInterval(function() { // slideSwitch()を時間intervalごと繰り返す。
   var tmp = self.next;
   self.$id.find('div').eq(self.next)
   .css({opacity: 0.0})
      .animate({opacity: 1.0}, self.options.animateTime, function() { // 次の要素の透過度を1.0にアニメーションする。
          self.next++;; // activeな要素からclass='active'を削除
    if (self.next >= self.$id.find('div').length) { self.next = 0; }
      });
   self.$id.find('div').eq(self.current)
   .animate({opacity: 0.0}, self.options.animateTime, function() { // 今の要素の透過度を0.0にアニメーションする。
     self.current = tmp;
   });  
  
  }, self.options.interval );
 
 };

})(jQuery);


参考にしたページ

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



以上
投稿者 時刻: