F 簡単１０■盛ります！スライド　フェード版

<!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>F 簡単１０■盛ります！スライド　フェード版</title>

<!--★コピーここから-->
<style type="text/css"><!--
/*★今回はボタンを含めた全てを#bsを基準にして位置指定をしています。#bsではpadding(薄い灰色)を使用しているので、paddingを含めた縦横が位置指定の基準になります。マイナス指定はpaddingの外側、プラスがpaddingの内側です*/

/*★必須。スライド画像の位置指定と、枠(paddingやborder)などの装飾。位置指定は必ずposition:●●(何でも使いやすい指定で);が必要*/
#bs{
position:relative;
margin:50px auto 10px;/*★水平中央位置指定(上、左右、下)*/
width:370px;/*★スライド画像の横幅*/
height:245px;/*★スライド画像の縦幅*/
background:#eee;/*★背景色　薄い灰色。余白の色になります*/
padding:30px 100px 40px;/*★余白指定(上、左右、下)。余白部分の色は#bsの背景色の色*/
border-width: 0px 50px 0px 20px;/*★枠線太さ(時計回りで上、右、下、左)*/
border-color:#aaa;/*★枠線の色　薄い灰色*/
border-style:solid;/*★枠線種類*/
outline:solid 1px #000;/*★一番外の細い枠線　黒色*/
}

/*★必須。フェード画像用の指定*/
#Ga1,#Ga2{
position:absolute;/*★必須。#bsを位置の基準にするためと画像２枚を同位置にするため*/
transition:1s ease-in-out;/*★フェード変化時間。1sは１秒*/
}

/*★必須。コメント用の指定*/
#Me1,#Me2{
position:absolute;/*★必須。#bsを位置の基準にするため*/
bottom:8px;/*★#bsを基準にした下からの位置指定(paddig使用なのでleftは指定せずに初期値のautoで)*/
transition:0.5s ease;/*★必須。最初の0.5sはコメントのフェード変化時間の0.5秒*/
width:370px;/*★スライド画像の横幅と同じ。#bsでpaddingを使用しているので100%指定は不可*/
background:#fff;/*★背景色　白色*/
border:solid 1px #aaa;/*★枠線　濃い灰色*/
text-indent:1em;/*★左からの１字下げ*/
}

/*★必須。スライド用のサブタイトルの位置指定*/
#Sb1,#Sb2{
position:absolute;/*★必須。#bsを位置の基準にするため*/
top:5px;/*★#bsを基準にした上からのサブタイトルの位置(paddig使用なのでleftは指定せずに初期値のautoで)*/
transition:0.5s ease;/*★必須。最初の0.5sはサブタイトルのフェード変化時間の0.5秒*/
width:370px;/*★スライド画像の横幅と同じ。#bsでpaddingを使用しているので100%指定は不可*/ 
font-size:12px;/*★文字サイズ*/
color:#fff;/*★文字色　白色*/ 
background:#aaa;/*★背景色　濃い灰色*/
text-align:center;/*★サブタイトルの左右中央位置指定*/
}

/*★必須。スライド用のボタンのformの位置指定*/
#bt{
position:absolute;/*★必須。#bsを位置の基準にするため*/
bottom:120px;/*★ボタンのformの位置指定　下から*/
right:-50px;/*★ボタンのformの位置指定　右から*/
}
--></style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>

<!--★コピーここから。画像位置とボタン指定。id指定は必須。★★最初のサブタイトルと最初の画像名と最初のコメントを必ず記述する。今回はボタンの位置指定もid="bs"を基準に指定-->

<div id="bs">
<div id="Sb1">５枚中１枚目表示</div><div id="Sb2"></div>
<img src="fr1.jpg" id="Ga1" alt=""><img src="" id="Ga2" alt="">
<div id="Me1">遠くを見つめる猫</div><div id="Me2"></div>

<form id="bt">
<input type="button" value="次へ" id="bt3"><br>
<input type="button" value="戻る" id="bt4"><br>
<br>
<input type="button" value="自動" id="bt1"><br>
<input type="button" value="停止" id="bt2"><br>
</form>
</div><!--★id="bs"の終了。ボタンの位置もid="bs"を基準に指定しているため-->

<script type="text/javascript"><!--
/*-============================================================================================
CSS3+JavaScriptでフェードイン・フェードアウトのスライドショー。ボタンとコメントとサブタイ追加　★2016/01/20グローバル変数を削除　
By　http://www.red.oit-net.jp/tatsuya/java/sshow2.htm (イヌでもわかるJavaScript講座)
ボタンの参考フリーソフト 「すなねぃる!!」 By  http://homepage3.nifty.com/metis/
==============================================================================================*/
(function (){ var n=0,tm; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像とコメントの同時指定。増減可能。['画像','コメント','サブタイトル'];　の３個をこの順番で記述。タグも使用可能
var ga= new Array;
ga[n++]=['fr1.jpg','遠くを見つめる猫','５枚中１枚目表示'];
ga[n++]=['fr2.jpg','オレンジ色の夕日','５枚中２枚目表示'];
ga[n++]=['fr3.jpg','ゆっくり歩くスマトラ虎','５枚中３枚目表示'];
ga[n++]=['fr4.jpg','大空を見上げるヒマワリ','５枚中４枚目表示'];
ga[n++]=['fr5.jpg','プラハの街の<span style="color:red;">赤い</span>屋根','５枚中５枚目表示'];

var myurl='';        //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
var spd=4000;　      //★画像切替時間 1000=1秒 スライド速度。CSS指定のフェード変化時間より長くする

var load=new Array();//画像先読み込み。切替をスムーズにする
for (var p=0,len=ga.length; p<len; p++){load[p]=new Image();load[p].src=myurl+ga[p][0];}
var i=-1;		          //現在表示している配列番号
var myflg=0;		          //どっちを表示して、どっちを消すかのフラグ
function myChange(){              /*スライドショーメイン関数*/
i= (i<len-1) ? i+1 : 0;
myflg=(myflg==0) ? 1 : 0;         //表示・非表示フラグ反転
if (myflg==0){
Ga1.src=myurl+ga[i][0]; Me1.innerHTML=ga[i][1]; Sb1.innerHTML=ga[i][2]; //次をセット。フェードイン。フェードアウト
Ga1.style.opacity=1; Ga2.style.opacity=0; Me1.style.opacity=1; Me2.style.opacity=0;
Sb1.style.opacity=1; Sb2.style.opacity=0;}
else{
Ga2.src=myurl+ga[i][0]; Me2.innerHTML=ga[i][1]; Sb2.innerHTML=ga[i][2]; //次をセット。フェードアウト。フェードイン
Ga1.style.opacity=0; Ga2.style.opacity=1; Me1.style.opacity=0; Me2.style.opacity=1;
Sb1.style.opacity=0; Sb2.style.opacity=1;}
tm=setTimeout(myChange,spd);      //指定速度周期に画像を更新する
}
function Chga(mode){
if(mode===0) {myChange();clearTimeout(tm); i+1; if(i>=len){i=0;}}
else{
clearTimeout(tm);
i=(i>0)? i-1:len-1;
myflg=(myflg==0) ? 1 : 0;         //表示・非表示フラグ反転
if (myflg==0){
Ga1.src=myurl+ga[i][0]; Me1.innerHTML=ga[i][1]; Sb1.innerHTML=ga[i][2]; //次をセット。フェードイン。フェードアウト
Ga1.style.opacity=1; Ga2.style.opacity=0; Me1.style.opacity=1; Me2.style.opacity=0;
Sb1.style.opacity=1; Sb2.style.opacity=0;}
else{
Ga2.src=myurl+ga[i][0]; Me2.innerHTML=ga[i][1]; Sb2.innerHTML=ga[i][2]; //次をセット。フェードアウト。フェードイン
Ga1.style.opacity=0; Ga2.style.opacity=1; Me1.style.opacity=0; Me2.style.opacity=1;
Sb1.style.opacity=0; Sb2.style.opacity=1;}
}}
/*■ie11ではdocument.getElementByIdを省略したら動作しない*/
document.getElementById('bt1').onclick=function (){clearTimeout(tm);myChange();};//自動
document.getElementById('bt2').onclick=function (){clearTimeout(tm);};//停止
document.getElementById('bt3').onclick=function (){clearTimeout(tm);Chga(0);};//次へ
document.getElementById('bt4').onclick=function (){clearTimeout(tm);Chga(1);};//戻る
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>
F 簡単１０■盛ります！スライド フェード版 最終修正日 : 2016/01/20

　F 簡単１０■盛ります！スライド　フェード版　　　　最終修正日 : 2016/01/20
