面白５■簡単スライド複数設置・枚数違い

●2016/02/29：即時関数で囲んで、グローバル変数を消しました。
簡単スライドショーを複数設置できるJavaScriptです。
それぞれのスライドショーごとに、画像枚数は自由に指定できますが、スライドショーの切替速度は、全部同じ速度指定になります。
見本のスライドショーの画像枚数は、それぞれ５枚、２枚、４枚ですが、切替速度は同じ2.5秒の指定です。

■切替速度が違う複数設置スライドショーはこちら→　面白６■簡単スライド複数設置・枚数と速度違い
■さらに画像オン停止付きの複数設置スライドショーはこちら→　面白７■簡単スライド複数設置・枚数と速度違いとオン停止

<!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"><!--
#Gas0,#Gas2{border-radius:20px;}/*★角丸指定。JavaScriptは無関係なので不要なら削除*/
--></style>

</head>
<body>

<div style="margin-top:50px; text-align:center;"><!--★←中央位置指定用。不要なら削除-->

<!--★ここからコピー。id="●"は、JavaScriptで指定したidga=[●,●,●～]を記入-->

<!--★１番目のスライドショー画像指定。ga[0]=[～]で指定した１番最初の画像のファイル名を記入。id="Gas0"を記入-->
<img src="a1.jpg" id="Gas0" alt="">

<!--★２番目のスライドショー画像指定。ga[1]=[～]で指定した１番最初の画像のファイル名を記入。id="Gas1"を記入-->
<img src="rose1.png" id="Gas1" alt=""><br>

<!--★３番目のスライドショー画像指定。ga[2]=[～]で指定した１番最初の画像のファイル名を記入。id="Gas2"を記入-->
<img src="pt25.jpg" id="Gas2" alt="">

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

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

<script type="text/javascript"><!--
(function (){ var i=0,j=0; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var ga=new Array;　       //★それぞれのスライドショーの画像指定。増減可能
ga[0]=["a1.jpg","a2.jpg","a3.jpg","a4.jpg","a5.jpg"]; //★１番目
ga[1]=["rose1.png","rose2.png"];                      //★２番目
ga[2]=["pt25.jpg","pt26.jpg","pt27.jpg","pt28.jpg"];  //★３番目

var idga=[Gas0,Gas1,Gas2];//★idの指定。増減可能。スライドショーの設置数と同じ数を指定
var spd=2500;             //★切替速度指定。1000=1秒。全スライドショー共通。

var n=ga.length;
function SSshow(){
for(i=0; i<n; i++) {var len=ga[i].length; idga[i].src=ga[i][j%len];}
j++;
setTimeout(SSshow,spd);
}
SSshow();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

面白５■簡単スライド複数設置・枚数違い UP日時 : 2016/02/29

　面白５■簡単スライド複数設置・枚数違い　　　　UP日時 : 2016/02/29