面白１８■連番＋拡張子のスライド

●2019/10/04：即時関数で囲んで、グローバル変数を消しました。

■スライド画像を連番ではなく通常作成したスライドショーのJavaScriptはこちら→　簡単１■自動スライド　超簡単

通常の簡単なスライドショー作成は、上記です。
しかし大量の画像でスライドショーをする時、画像名を列挙していくのが大変な時、画像が連番で作成してあれば、もっと簡単に記述できます。
これはスライド画像を連番で作成した自動スライドショーです。画像の拡張子は同一であれば、なんでもいいです。
原本の OpenSpace を使いやすいように改造しました。

たとえば、画像の名前が、mini0.png から mini15.png の16枚だったら ↓
var myurl="mini"; //★画像パス。連番数字以外の全画像共通部分
var ex="png";

それが image というフォルダーに入っていたら ↓
var myurl="image/mini"; //★画像パス。連番数字以外の全画像共通部分
var ex="png";

そのフォルダーが、この html よりも一つ上の階層にあったら ↓
var myurl="../image/mini"; //★画像パス。連番数字以外の全画像共通部分
var ex="png";

画像連番の開始番号は「0」でも「1」でも大丈夫です。

上記の例では、下記になります。 ↓
var n=0;　//★画像の連番の開始番号。何番から開始してもいいが連番であること

極端な話、連番でさえあれば 16、17，18，19、20 の5枚の画像だけ使用することもできます。
その場合の指定は下記になります。 ↓
var imgs=5; //★画像の総枚数
var n=16; //★画像の連番の開始番号。何番から開始してもいいが連番であること

■スライド画像を連番で作成したマウスクリックのJavaScriptはこちら→　面白１８-１■連番＋拡張子の画像クリックのスライド
■スライド画像を連番で作成したマウスオンの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"><!--
/*★必須。スライド画像用の指定*/
#Ga{
margin:50px auto;/*★画像の中央位置指定(上下　左右)*/
width:250px;/*★画像横幅*/
height:444px;/*★画像縦幅*/
display: block;/*★ブロック要素指定。上記の中央位置指定を有効にする為*/
border:solid 3px gray;/*★枠線。お好みで*/
}
--></style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。下の１行は画像指定。１番最初の画像のファイル名を記入。id="Ga"を必ず記入-->
<img src="DrawWiz/dwz1.jpg" id="Ga" alt="スライドショー表示">

<script type="text/javascript"><!--
/*===============================================================
連番＋拡張子のスライドショー　　2019/10/04　連番、拡張子の選択
http://www.openspc2.org/reibun/javascript/image/003/index.html
================================================================*/
(function (){ //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var imgs=16;             //★画像の総枚数
var n=1;                 //★画像の連番の開始番号。何番から開始してもいいが連番であること
var spd=2000;            //★切替秒数(1000=1秒)
var myurl="DrawWiz/dwz"; //★画像パス。連番数字以外の全画像共通部分
var ex="jpg";            //★画像の拡張子。jpg,gif.png 等。全画像共通拡張子

//指定ここまで---------------------------------------------
var i=0;
function changeImg(){
var ga=myurl+(i+n)+"."+ex; i++; i%=imgs;
document.getElementById("Ga").src=ga;
setTimeout(changeImg,spd);
}
changeImg();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

面白１８■連番＋拡張子のスライド UP日時 : 2019/10/04

　面白１８■連番＋拡張子のスライド　　　　UP日時 : 2019/10/04