面白１■画像クリックでスライド

●2017/06/18：即時関数で囲んで、グローバル変数を消しました。

■自動スライドショーのJavaScriptはこちら→　簡単１■自動スライド　超簡単

通常の簡単な自動スライドショー作成は、上記です。
こちらは、画像本体をクリックすることで次々に画像が出てくるスライドショーです。
スクロールしなければ見れないような大きな画像の時に便利です。

画像表示位置の img を<a href="#">～～</a>で囲んでいますが、この赤字の部分は削除してもかまいません。
この赤字部分は、クリックするとページが一番上に戻る指定です。
画像の大きさや表示位置によっては、削除して下さい。

見本で使用させていただいた画像は、素材サイトの画像ではありませんが、作者のクレジット付きで拡散希望です。
画像はまんがイラストぼうごなつこのページから。
■2017/06/25；画像追加
■2017/06/30；画像追加
■2017/07/05；画像追加
■2017/08/09；画像追加

■スライド画像を連番で作成した画像クリックのスライドショーの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:0px auto 30px;/*★画像の中央位置指定(上　左右 下)*/
display: block;/*★ブロック要素指定。上記の中央位置指定を有効にする為*/
}
--></style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>

<p style="text-align:center;color:#f00;">■画像自体のクリックで、次の画像が表示されます■</p>

<!--★ここからコピー。下記一行が画像指定。必ず１番最初の画像のファイル名を記入。id="Ga"を必ず記入-->
<!--★画像指定を囲んでいる<a href="#">～～</a>の部分は削除しても可。これはクリックでページの一番上に戻る指定です-->

<a href="#"><img src="a1.jpg" id="Ga" title="画像クリックで次へ"></a>

<script type="text/javascript"><!--
/*画像クリックでスライドショー　2017/06/18==================================================*/
(function (){ //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像指定。増減可能。画像を順番に'●',と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var ga=['a1.jpg','a2.jpg','a3.jpg','b1.jpg','b2.jpg','b3.jpg','b4.jpg','b5.jpg','b6.jpg','b7.jpg','b8.jpg','b9.jpg','b10.jpg','b11.jpg','b12.jpg','b13.jpg','b14.jpg','b15.jpg'];
var myurl='';      //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分

//指定ここまで--------------------------------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var load=new Array();//画像先読み込み。切替をスムーズにする
for (var p=0,len=ga.length; p<len; p++){load[p]=new Image();load[p].src=myurl+ga[p];}
var i=1; //0ではスタートがおかしくなる
function Show(){ $("Ga").src=myurl+ga[i%len];i++;}
$("Ga").onclick=function (){Show();}
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

面白１■画像クリックでスライド UP日時 : 2017/06/18

　面白１■画像クリックでスライド　　　　UP日時 : 2017/06/18