合体１１　フェードのリアル時計

■2015/11/10：CSS の #wakuF の『 box-shadow:-5px -5px 5px #333 inset;★スライド領域の内側の影指定*/ 』を
『 box-shadow:-5px -5px 5px #333 inset;/*★スライド領域の内側の影指定*/ 』に修正。（赤字分追加）→ #wakuF は #baseF へ変更しています。
■2015/12/08：少し簡略化。

ブログパーツでよく見る時計のようなものを、自分のお気に入りの画像を使用して作成した JavaScript、第１弾です。
スライドショーはランダム指定なので、同じ画像が出る時も有ります。画像表示を順番通りに変更することもできます
前回は類似のJavaScriptを２つ掲載していましたが、今回UP分はそれらの欠点を改善したものです。
　・フェードが綺麗
　・ランダム表示が可能
　・画像が偶数枚でなくても可能
さらに装飾を追加した第２弾は■合体１５■Sl+Ot■フェードの装飾付きリアル時計■から。
カウントダウンを追加した第３弾は■合体１６■Sl+Ot+Mv■フェードのリアル時計+カウントダウン■から。

CSS の時計の数字の font の一括指定の方法は PHP & JavaScript Room から。
img タグの画像の内側に影を付ける方法は9ineBBから。

■合体元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"><!--
/*★必須。スライド画像の位置指定と、枠(paddingやborder)などの装飾。位置指定は必ずposition:●●(何でも使いやすい指定で);が必要*/
#baseF{
position:relative;/*★必須*/
margin:40px auto;/*★中央配置指定　上下　左右*/
width:160px;/*★スライド画像と同じ横幅*/
height:240px;/*★スライド画像と同じ縦幅*/
border-radius:10px;/*★角丸指定*/
box-shadow:inset -5px -5px 5px #333;/*★スライド領域の内側の影指定 灰色*/
}

/*★必須。フェードスライド用の指定*/
#Ga1,#Ga2{
position:absolute;/*★必須。#wakuFを位置の基準にするためと画像２枚を同位置にするため*/
top:0;
left:0;
transition:2s ease-in-out;/*★フェード変化時間。1sは１秒*/
border-radius:10px;/*★角丸指定*/
z-index:-1;/*★スライド領域の内側に影を付けるため、マイナス指定*/
}

/*★必須。時計の文字領域指定*/
#timeF{
position:absolute;/*★必須。#baseFを位置の基準にするため*/
bottom:10px;/*★必須。文字の位置指定。#wakuFの下からの位置。指定場所はお好みで*/
width:100%;/*★必須。文字の左右中央位置指定のために横幅指定。#wakuFの横幅一杯*/
text-align:center;/*★文字の左右中央位置指定*/
color:#fff;/*★文字色　白*/
font: bold 30px Arial,sans-serif;/*★太字、サイズ、フォント書体を一括指定*/
text-shadow: 2px 2px 2px #333;/*★文字の影指定*/
}
--></style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。下の１行が時計の位置指定-->
<div id="baseF"></div>


<script type="text/javascript"><!--
/*==================================================================================================
★ランダム切替のフェードの画像スライドショーと時計を合体　　　2015/12/08
フェードのスライド　By　http://www.red.oit-net.jp/tatsuya/java/sshow2.htm (イヌでもわかるJavaScript講座)
リアル時計  By  http://makemobile.6.tool.ms/121/
===================================================================================================*/
//★画像指定。画像を順番に"●",と区切って、いくつでも並べる。最後の)の前には,(カンマ)無し
var ga=new Array("ko10.jpg","ko11.jpg","ko12.jpg","ko13.jpg","ko14.jpg","pt21b.jpg","pt56.jpg","pt57.jpg");   
var myurl="";                     //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
var spd=5000;                     //★1000=1秒。スライド速度。CSS指定のフェード変化時間より長くする

//指定項目終了。ここからフェードのスライドショー部分--------------------
var load=new Array();//画像先読み込み。切替をスムーズにする
for (var p=0;p<ga.length;p++){load[p]=new Image();load[p].src=myurl+ga[p];}
var i=-1;		          //現在表示している配列番号
var myflg=0;		          //どっちを表示して、どっちを消すかのフラグ
function myChange(){              /*スライドショーメイン関数*/
/*★配列番号ランダム表示。★↓下の１行を『 i=(i<ga.length-1)?++i:0; 』と変更すると順番通り表示*/
i=Math.floor(Math.random()*ga.length);　  
myflg=(myflg==0) ? 1 : 0;         //表示・非表示フラグ反転
if (myflg==0){ Ga1.src=myurl+ga[i]; Ga1.style.opacity=1; Ga2.style.opacity=0; } //次の画像をセットする。フェードイン。フェードアウト
else{ Ga2.src=myurl+ga[i]; Ga1.style.opacity=0; Ga2.style.opacity=1; } //次の画像をセットする。フェードアウト。フェードイン
setTimeout( "myChange()",spd);    //指定速度周期に画像を更新する
}	
window.onload=myChange;

//ここから時計部分------------------------------------------------
function Clk(){
function f(n){return n<10?"0"+n:n;}
var t=new Date;
document.getElementById("timeF").innerHTML=f(t.getHours())+":"+f(t.getMinutes())+":"+f(t.getSeconds());
}
setInterval("Clk()",1000);
//スライドショーと時計のデータを#baseFにまとめる-----------------
var sss='<img src="" id="Ga1"><img src="" id="Ga2"><div id="timeF"></div>';
document.getElementById("baseF").innerHTML=sss;
// --></script>
<!--★ここまでコピー-->

<br><br><br>
</body>
</html>

合体１１■Sl+Ot■ フェードのリアル時計 最終修正日 : 2015/12/08

　合体１１■Sl+Ot■　フェードのリアル時計　　　　　最終修正日 : 2015/12/08