背景スライド６■box・右端敷詰

●2016/04/04：即時関数で囲んで、グローバル変数を消しました。
boxの背景画像の右端指定のスライドショーです。
今回は「bodyの背景画像もどき」ではないので、
「position:absolute; top:0; left:0; width:100%; z-index:-1;」等の指定は不要です。
表示領域boxの横幅は「植物の画像の横幅300px」＋「スライドするカーテンの背景画像の横幅150px」＝450px で作成しました。

CSSで背景画像の最初の１枚目を指定していますが、指定しなくても動作します。
ただ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>背景スライド６■box・右端敷詰</title>

<!--★コピーここから-->
<style type="text/css"><!--
#myB{
margin:50px auto;/*★位置指定(上下、左右)*/
background:url(frc1.gif) repeat-y right top;/*★背景画像指定。縦一列指定。右上指定。最初の１枚を記述。背景の実寸横150px縦150px*/
width:450px;/*★横幅指定。お好みで。植物の画像の横幅300px＋スライドする背景の横幅150px＝450px*/
height:450px;/*★植物の画像の縦幅と同じ*/
/*★ここから下は装飾用。不要なら削除*/
border:solid 1px #fff;/*★枠線　白色*/
border-radius:20px;/*★角丸指定*/
box-shadow:5px 5px 10px #333;/*★影指定*/
text-align:left;/*★植物の画像位置の左側指定。右側指定ならtext-align:right;で*/
overflow:hidden;/*★#myBの領域からはみ出た分は非表示*/
}
--></style>
<!--★コピーここまで。bodyにもコピー有り-->

</head>
<body>

<!--★コピーここから。下記１行が背景スライド領域指定。id="myB"を必ず記述。左側の植物の画像はここで指定-->
<div id="myB"><img src="pt10.jpg" style="width:300px;height:450px;"></div>


<script type="text/javascript"><!--
//スライド背景　box・右端敷詰===============================================
(function (){var i=0; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

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

//指定ここまで------------------------------------------------------------------
var load=new Array();//画像先読み込み。切替をスムーズにする
for (var p=0,len=ga.length; p<len; p++){load[p]=new Image();load[p].src=myurl+ga[p];}
function chbg(){
myB.style.backgroundImage="url("+myurl+ga[i%len]+")";
i++; setTimeout(chbg,spd);
}
chbg();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

背景スライド６■box・右端敷詰 最終修正日 : 2016/04/04

　背景スライド６■box・右端敷詰　　　　最終修正日 : 2016/04/04