面白６■簡単スライド複数設置・枚数と速度違い

●2016/02/29：即時関数で囲んで、グローバル変数を消しました。
簡単スライドショーを複数設置できるJavaScriptです。
画像枚数も切替速度も、個別に指定できます。見本は５枚で２秒、２枚で0.5秒、４枚で４秒が指定してあります。
原本は、JavaScript例文辞典から。

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

<!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"><!--
/*===============================================================
複数設置のスライドショー  ★2016/02/29 修正
By http://www.openspc2.org/reibun/javascript/image/008/index.html(JavaScript例文辞典)
================================================================*/
(function (){ var i=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 s=[20,5,40];          //★スライドの切替速度。スライドショーの設置数と同じ数を指定。20で2秒。5は0.5秒

var n=ga.length;//スライドの設置数
//●↓0の並んだn個の配列　参考：http://www.inazumatv.com/contents/archives/9554
var timer=new Array(n+1).join('0').split('');
var j=new Array(n+1).join('0').split('');
function changeImg(){
for(i=0; i<n; i++) {
timer[i]++; var tt=timer[i]%s[i];var len=ga[i].length;
if (tt===0){j[i]++;idga[i].src=ga[i][j[i]%len];}
}
setTimeout(changeImg,100);
}
changeImg();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

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

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