フェード１７■大小二つのスライド　コメ付

大きな全面フェードのスライドと、小さなスライドの組み合わせ。
ここでは、画像の実寸は小さいスライドの方です。フェード画面はそれを全面に拡大し、z-index:-1;指定で、『背景画像もどき』にしてあります。

だからフェード画面の上に文章も書けるし、スライドのコメントも載せられます。
なお、『動く背景』のコーナーには、同じ仕様でコメント無しの分が置いてあります。

◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』

<!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>

</head>
<!--★ここからコピー-->
<style type="text/css">
<!--
/*★フェードが見やすいよう、画像の色によく似た背景色を指定*/
body {       
      background-color :#659bc6;
}
-->
</style>

<script type="text/javascript">
<!--
/*********★フェードインを繰り返す。質問箱よりアレンジ2014/03/24**********/
/*********★全面フェードスライドと、小さなスライドのセット****************/

/*★スライドの画像指定 増減可能*/
var ga = new Array
("gat7.jpg","gat8.jpg","gat9.jpg");

/*★コメント指定 増減可能。改行は<br>で*/
var mes = new Array
("ジョン・ウィリアム・ゴッドワード<br>イオニアの踊り子","ジョン・ウィリアム・ゴッドワード<br>幻想","ジョン・ウィリアム・ゴッドワード<br>会えない時間に愛は育つ");


var speed=5000 　/*★スライド切替時間　1000=1秒*/
var henka = 80    /*★フェードの変化時間。原本80 値が大きいとゆっくり*/

function WShow(){
aShow();
Sf();
}

/*小さなスライド分*/
var ai = 0;
function aShow(){                      
	if(ai>(ga.length-1)) {ai=0;}
        document.getElementById("aGa").src  = ga[ai];
        document.getElementById("Me").innerHTML = mes[ai];
        ai++;
	setTimeout("aShow()",speed);
}

/*フェード部分主体*/
var tid1;
var tid2;

function Sf() {
Show();
fdi();
tid2=window.setInterval("fdi()", speed);
};

function fdi() {
var img = document.getElementById("Ga");
img.style.visibility = "visible";
fadeIn("Ga", 0);
}

function fadeIn(imgId, opacity) {
if (opacity <= 100) {
setOpacity(document.getElementById(imgId), opacity);
opacity += 10;
tid1=window.setTimeout("fadeIn('" + imgId + "'," + opacity + ")", henka);  
} else {
window.clearTimeout(tid1);
}
}
function setOpacity(img, opacity) {
img.style.filter = "alpha(opacity:" + opacity + ")";
img.style.KHTMLOpacity = opacity / 100;
img.style.MozOpacity = opacity / 100;
img.style.opacity = opacity / 100;
}

/*全面スライド部分*/
var i=0;
function Show(){
	if(i>ga.length-1) {i=0;}
        document.getElementById("Ga").src =ga[i];
        i++;
	setTimeout("Show()",speed);
}
//-->
</script>
<!--★ここまでコピー　bodyの中にもコピーがあります-->

<body onload="WShow();">
<!--★↑bodyタグの中の onload="WShow();"も忘れずにコピー-->

<!--★ここからコピー-->
<!--★大きなスライド分。最初の<img src～～>の中の指定は、最初の画像名以外は、全部このままコピー-->
<img src="gat7.jpg" id="Ga" style="width:100%; position:absolute; top:0px; left:0px; visibility: hidden; z-index:-1;" >
<!--★小さなスライド分。スクロールしても右下から位置が動かないstyle指定。最初の画像名、id="aGa"、画像のサイズが同じならサイズを記入-->
<img src="gat7.jpg" id="aGa"style="width:295px;height:500px;position:fixed;bottom:0px;right:0px;">

<!--★コメント表示位置。id="Me"と、最初のコメントを記述-->
<p align="left" id="Me" style="background-color:#659bc6;font-size: 80%; padding:5px;width:250px;">ジョン・ウィリアム・ゴッドワード<br>イオニアの踊り子</p>
<!--★ここまでコピー-->


<br><br><br><br>
<div align="left">
<div style="background-color:#eeeeee; padding:20px; width:30%; font-size: 90%; text-align: left;">
大きな全面フェードのスライドと、小さなスライドの組み合わせ。<br>
ここでは、画像の実寸は小さいスライドの方です。フェード画面はそれを全面に拡大し、z-index:-1;指定で、『背景画像もどき』にしてあります。<br><br>
だからフェード画面の上に文章も書けるし、スライドのコメントも載せられます。<br>
なお、『動く背景』のコーナーには、同じ仕様で<a href="../bg/bg_s7.html">コメント無し</a>の分が置いてあります。
<br>
</div>
</div>

</body>
</html>

フェード１７■大小二つのスライド コメ付

　フェード１７■大小二つのスライド　コメ付　　　　