面白１８-２■連番＋拡張子の画像マウスオンのスライド

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

■スライド画像を連番で作成した自動スライドショーのJavaScriptはこちら→　面白１８■連番＋拡張子のスライド

上記のJavaScriptに改造しました。
スライド画像を連番で作成、画像の拡張子は同一のスライドショーで、画像マウスオンでスライドします。
画像の指定方法は上記と全く同じなので、上記の説明を参照して下さい。
32枚の画像を、GIFアニメっぽくするためにスライドショーの速度を速くしました。
単純なスライドショーですが、使用する画像によって面白い効果の出るスライドショーです。

普通は画像指定行に「title="マウスオンで動く"」というtitle属性を記述するのですが、今回は省略しました。
画像が小さくてスライドショーの邪魔になったからですが、邪魔にならない大きさの画像ならtitle属性も記述して下さい。

■スライド画像を連番ではなく通常作成した画像マウスオンのスライドショーの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"><!--
body{ background:#222; }/*★背景色濃灰色指定。不要なら削除*/

/*★必須。スライド画像用の指定*/
#Ga{
margin:30px auto;/*★画像の中央位置指定(上下　左右)*/
width:94px;/*★画像横幅*/
height:148px;/*★画像縦幅*/
display: block;/*★ブロック要素指定。上記の中央位置指定を有効にする為*/
}
--></style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>

<p style="text-align:center;color:#fcc;margin-top:60px;">■画像自体のマウスオンで、画像が動きます■</p>

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

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

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

//指定ここまで---------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var i=0, tm;
function changeImg(){
i++; i%=imgs; //■マウスオンの場合、記述位置注意
var ga=myurl+(i+n)+"."+ex;
$("Ga").src=ga;
tm=setTimeout(changeImg,spd);
}
$("Ga").onmouseover=function (){changeImg();}//スライドする
$("Ga").onmouseout=function (){clearTimeout(tm);};//停止
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

面白１８-２■連番＋拡張子の画像マウスオンのスライド UP日時 : 2019/10/30

　面白１８-２■連番＋拡張子の画像マウスオンのスライド　　　　UP日時 : 2019/10/30