背景スライド２-１■フェードの全面スライドループ無し

●2020/04/22：即時関数で囲んで、グローバル変数を消しました。

■画像を背景風に全面１枚表示でループするJavaScriptはこちら→　背景スライド２■フェードの全面スライドショー

要望があったので上記のJavaScriptを改造しました。
画面全部を使用するスライドショーで、見た目は背景画像のフェードのスライドショーのフル・スクリーン版のJavaScriptですが、改造元はスライドショーがループし、今回の分はループしません。
今回は指定画像が表示し終わったら最後の画像で停止します。

指定方法で注意することは最後の画像だけ２回記述するということです。
更に改造元より少し内容を微修正しています。

■背景画像を全面１枚表示にした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>

</head>
<body>
<!--★ここからコピー。下記１行はスライド画像指定。id=bbGa は必須-->
<div id="bbGa"></div>

<script type="text/javascript"><!--
/*-============================================================================================
CSS3+JavaScriptでフェードイン・フェードアウトの背景画像風スライドショー・ループ無し　★2020/04/22 　
By　http://cya.sakura.ne.jp/java/sshow2.htm(新サイト：イヌでもわかるJavaScript講座)　
==============================================================================================*/
(function (){   //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像指定。増減可能。画像を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
//★★注意！スライドショーをループさせないので最後の画像だけ２回記述する
var ga=["pdq6.jpg","pdq7.jpg","pdq8.jpg","pdq9.jpg","pdq9.jpg"];   
var myurl="";        //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分

var posi="fixed"; 　 //★スクロールに合わせて移動するか？ 位置固定：fixed　移動：absolute
var Zx=-1;           //★CSSのz-index指定。背景画像のように、上に文字や他の画像を表示するには、必ずマイナス指定にする。
var spd=5000;　      //★画像切替時間 1000=1秒 スライド速度。下記のフェード変化時間より長くする
var tran="transition:2s ease-in-out;";//★フェードの変化時間。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;		          //どっちを表示して、どっちを消すかのフラグ
var tm;                           //■追加
function myChange(){              /*スライドショーメイン関数*/
i= (i<len-1) ? i+1 :len-1;　　    //次の配列番号■修正
myflg=(myflg===0) ? 1 : 0;        //表示・非表示フラグ反転
if(i===len-1){clearTimeout(tm);}  //■ループさせずに停止
else 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; } //次をセット。フェードアウト。フェードイン
tm=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.height=100+"%";ob.zIndex=Zx;
myChange();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

背景スライド２-１■フェードの全面スライドループ無し UP日時 : 2020/04/22

　背景スライド２-１■フェードの全面スライドループ無し　　　　　UP日時 : 2020/04/22