背景スライド８■大小二つのスライド

●2017/07/25：即時関数で囲んで、グローバル変数を消しました。
同じ画像を使用して、大きな全面フェードのスライドショーと、小さなスライドショーの組み合わせています。
ここでは、画像の実寸は小さいスライドショーの方で、フェードはそれを全面に拡大しています。
だからちょっとボケてます。
もう少し大きめの画像を使用して、小さいスライドをサイズ指定で縮小表示してもいいかもしれません。

フェードのスライドショーの原本はイヌでもわかるJavaScript講座から。
JavaScriptのソースの中で「z-index」をマイナス指定にすることで、背景画像のフェードのように扱っています。

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

/*★小さなスライドの指定。#aGa必須。指定はお好みで*/
#aGa{
width:375px;height:250px;/*★画像の縦横サイズ*/
margin-top:20px;margin-left:20px;/*★位置指定*/
border:solid #fff 1px;/*★枠線指定*/
}
--></style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー-->

<!--★下記１行は大きなスライド分。id="bbGa"は必須-->
<div id="bbGa"></div>

<!--★下記１行は小さなスライド分。最初の画像名、id="aGa"は必須-->
<img src="ko1.jpg" id="aGa">

<script type="text/javascript"><!--
/*-============================================================================================
全面フェードスライドと、小さなスライドのセット ★2017/07/25
フェードの背景画像風スライドショーBy　http://cya.sakura.ne.jp/java/sshow2.htm (イヌでもわかるJavaScript講座)
==============================================================================================*/
(function (){ //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像指定。増減可能。画像を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var ga=["ko26.jpg","ko3.jpg","ko15s.jpg","ko25.jpg"];   
var myurl="";         //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分

var posi="fixed";     //★全画面スライドがスクロールに合わせて移動するか？ 位置固定：fixed　移動：absolute
var Zx=-1;            //★CSSのz-index指定。背景画像のように、上に文字や他の画像を表示するには、必ずマイナス指定にする。
var spd=5000;　       //★画像切替時間 1000=1秒 スライド速度。下記のフェード変化時間より長くする
var tran="transition:2s ease;";//★フェードの変化時間。CSS指定。2sは2秒

//指定ここまで----------------------------------------------------------------------
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;		          //現在表示している配列番号
var myflg=0;		          //どっちを表示して、どっちを消すかのフラグ
function myChange(){              /*スライドショーメイン関数*/
i= (i<len-1) ? i+1 : 0;　　       //次の配列番号
myflg=(myflg==0) ? 1 : 0;         //表示・非表示フラグ反転
if (myflg==0){ $("Ga1bb").src=myurl+ga[i]; $("Ga1bb").style.opacity=1; $("Ga2bb").style.opacity=0; } //フェードイン。フェードアウト
else{ $("Ga2bb").src=myurl+ga[i]; $("Ga1bb").style.opacity=0; $("Ga2bb").style.opacity=1;} //フェードアウト。フェードイン
setTimeout(myChange,spd);         //指定速度周期に画像を更新する
}	
var cs="position:absolute;top:0;left:0;"+tran+";width:100%;";
var sss='<img src="" id="Ga1bb" style="'+cs+'"><img src="" id="Ga2bb" style="'+cs+'">';
$("bbGa").innerHTML=sss;
var ob=$("bbGa").style;
ob.position=posi;ob.top=0; ob.left=0; ob.width=100+"%"; ob.zIndex=Zx;

/*小さなスライド分*/
var ai=0;
function Show(){ $("aGa").src=myurl+ga[ai%len]; ai++; setTimeout(Show,spd);}
myChange(); Show();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

背景スライド８■大小２つのスライド 最終修正日 : 2017/07/25

　背景スライド８■大小２つのスライド　　　　　最終修正日 : 2017/07/25