面白７■簡単スライド複数設置・枚数と速度違いとオン停止

画像マウスオンで、それぞれのスライドショーが個別に停止します

●2016/02/29：即時関数で囲んで、グローバル変数を消しました。
babu_babu_baboo様に作成していただいた、複数設置のスライドショーのJavaScriptです。
画像枚数も切替速度も、個別に指定できます。見本は５枚で２秒、２枚で0.5秒、４枚で４秒が指定してあります。
さらに各スライドショーの画像にマウスオンすると、スライドが停止します。

JavaScriptは上部の個別指定部分と、下部の共通指定部分とに分かれています。
上部はスライドショー１個ごとに指定をします。

var ga1=new Changer (
document.getElementById ('Gas1'), ←idの指定
2000,　←スライドショーの切替速度の指定。1000=1秒
['a1.jpg','a2.jpg','a3.jpg','a4.jpg','a5.jpg']　←画像指定。何枚でも増減可能
);
ga1.start();
Gas1.onmouseover=ga1.stop; Gas1.onmouseout=ga1.start;　←画像マウスオンで停止

上記が１番目のスライドショーの個別指定の部分です。
ga1とGas1の部分はかならず統一して下さい。
２番目のスライドショーでは、この部分が、ga2とGas2に変更になります。

■切替速度が同じ複数設置スライドショーはこちら→　面白５■簡単スライド複数設置・枚数違い
■画像マウスオン停止をしない複数設置スライドショーはこちら→　面白６■簡単スライド複数設置・枚数と速度違い

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>面白７■簡単スライド複数設置・枚数と速度違いとオン停止</title>

<style type="text/css"><!--
#Gas1,#Gas3{border-radius:20px;}/*★角丸指定。JavaScriptは無関係なので不要なら削除*/
--></style>

</head>
<body>
<p style="margin-top:50px; text-align:center;">画像マウスオンで、それぞれのスライドショーが個別に停止します</p>
<div style="text-align:center;"><!--★←中央位置指定用。不要なら削除-->

<!--★ここからコピー-->

<!--■１番目のスライドショー画像指定。var ga1で指定した、１番最初の画像のファイル名とid="Gas1"を記入-->
<img src="a1.jpg" id="Gas1" alt="">

<!--■２番目のスライドショー画像指定。var ga2で指定した、１番最初の画像のファイル名とid="Gas2"を記入-->
<img src="rose1.png" id="Gas2" alt=""><br>

<!--■３番目のスライドショー画像指定。var ga3で指定した、１番最初の画像のファイル名とid="Gas3"を記入-->
<img src="pt25.jpg" id="Gas3" alt="">

<!--★JavaScriptで４番目以降も指定したら、このまま続ける-->

</div><!--★位置指定用の終了-->

<script type="text/javascript"><!--
/*===============================================================
複数のスライドショー By http://d.hatena.ne.jp/babu_babu_baboo/20160128/1453989736（babu_babu_babooのごみ箱）
================================================================*/
(function (){ //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//■１番目のスライドショー指定。ga1とGas1を使用-------------------------------------
var ga1=new Changer ( /*★下の３行が上から　id指定、速度指定(1000=1秒)、画像指定　です*/
  document.getElementById ('Gas1'),   
  2000,
  ['a1.jpg','a2.jpg','a3.jpg','a4.jpg','a5.jpg']
);
ga1.start();
Gas1.onmouseover=ga1.stop; Gas1.onmouseout=ga1.start;/*★画像オン停止不要なら、この行削除*/

//■２番目のスライドショー指定。ga2とGas2を使用-------------------------------------
var ga2=new Changer ( /*★下の３行が上から　id指定、速度指定(1000=1秒)、画像指定　です*/
  document.getElementById ('Gas2'),
  500,
  ['rose1.png','rose2.png']
);
ga2.start();
Gas2.onmouseover=ga2.stop; Gas2.onmouseout=ga2.start;/*★画像オン停止不要なら、この行削除*/

//■３番目のスライドショー指定。ga3とGas3を使用-------------------------------------
var ga3=new Changer ( /*★下の３行が上から　id指定、速度指定(1000=1秒)、画像指定　です*/
  document.getElementById ('Gas3'),
  4000,
  ['pt25.jpg','pt26.jpg','pt27.jpg','pt28.jpg']
);
ga3.start();
Gas3.onmouseover=ga3.stop; Gas3.onmouseout=ga3.start;/*★画像オン停止不要なら、この行削除*/

//■４番目以上もスライド指定の場合は、この下に記述。４番目はga4とGas4を使用するとわかりやすいです


//■ここからは全スライド共通部分。このままで------------------------------------------
function Changer (target, speed, imgs) {
  var timerId = null;
  var index = 0;

  var obj = {
    start: function () {
      if (! timerId){timerId = setInterval (obj.show, speed);}
    },

    stop: function () {
      if (timerId){timerId = clearInterval (timerId), null;}
    },
    
    show: function () {
      if (index === imgs.length){index = 0;}
      target.src = imgs[index++];
    }
  };
  return obj;  
}
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

面白７■簡単スライド複数設置・枚数と速度違いとオン停止 UP日時 : 2016/02/29

　面白７■簡単スライド複数設置・枚数と速度違いとオン停止　　　　UP日時 : 2016/02/29