合体背景１■背景画像スライドの横移動

●2017/07/23：即時関数で囲んで、グローバル変数を消しました。
『動く背景』と、背景画像スライドを合体しました。
背景画像はcssの background-repeat:repeat-x;指定で、上一列指定になっています。
スライドさせず、横流しするだけでも面白いです。
見本は色違いの背景画像なので、スライドさせることでGIFアニメの画像のように見えます。

前回掲載分はbodyの背景画像の上端指定でした。
しかしチラつき防止のためにbodyではなくdivで上端に領域を作って、その背景画像をスライドさせる方法に修正しました。
修正理由の詳細は、こちらから。
bodyの背景画像のように上に文章が書けるように、divにCSSで z-indexのマイナス指定を付けます。

CSSで背景画像の最初の１枚目を指定していますが、指定しなくても動作します。
ただ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>

<!--★コピーここから-->
<style type="text/css"><!--

#bgD{
position:absolute; top:0; left:0;/*★必須。位置指定。左上指定*/
z-index:-1;/*★必須。bodyの背景のように扱うため z-indexはマイナス指定。数値は調整可能*/
background:url(fi9.jpg) repeat-x;/*★必須。背景画像指定。横に繰り返し。最初の１枚を記述。背景画像サイズは横292px縦190px*/
width:100%;/*★必須。横幅一杯*/
height:190px;/*★必須。縦幅は背景画像の縦サイズ*/
}

/*★タイトル文字指定。不要なら削除*/
.test1{
text-align:center;/*★左右中央位置*/
margin-top:50px;/*★上からの位置*/
color: #fff;/*★文字色　白*/
font-size:30px;/*★文字サイズ指定*/
font-weight: bold;/*★太字指定*/
opacity:0.7;/*★透過指定。文字色を薄くする*/
text-shadow:1px 1px 1px #000;/*★文字の影指定　黒色*/
}
--></style>
<!--★コピーここまで。bodyにもコピー有り-->

</head>
<body>

<!--★コピーここから。下記１行が背景スライド位置指定。id="bgD"は必須-->
<div id="bgD"></div>
<p class="test1">◎動くJavaScript◎</p><!--★タイトル文字指定。不要ならこの行は削除-->

<script type="text/javascript"><!--
/*===================================================================
スライドショーと上端背景移動の合体　★2017/07/23
背景移動参考：By  http://homepage2.nifty.com/toraneko/haikei/ugoku-haikei.html(とらねこ庵)
背景移動参考：By  http://ijichi.easter.ne.jp/java9/haikei3.htm(オリジナルJavaScript)
=====================================================================*/
(function (){var i=0; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

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

var mx=2;      //★右側へ移動する距離。マイナス数値で左側移動。0だと縦移動のみ。両方の数値指定で斜め移動。数値が大きいと速い
var my=0;      //★下側へ移動する距離。マイナス数値で上側移動。0だと横移動のみ。両方の数値指定で斜め移動。数値が大きいと速い
var Bspd=50;   //★背景移動速度。この数値が小さいと速い

//指定ここまで------------------------------------------------------------------
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(){
/*■下記１行をdocument.body.style.backgroundImage="url("+myurl+ga[i%len]+")";とするとbody用背景になりますがチラつきます*/
bgD.style.backgroundImage="url("+myurl+ga[i%len]+")";
i++; setTimeout(chbg,spd);
}
/*★背景移動指定*/
var xp=0, yp=0, L, T; 
function bgGo(){ xp+=mx; yp+=my; L=xp+"px"; T=yp+"px"; bgD.style.backgroundPosition=L+" "+T; setTimeout(bgGo,Bspd); }
chbg(); bgGo();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

合体背景１■背景画像スライドの横移動 最終修正日 : 2017/07/23

　合体背景１■背景画像スライドの横移動　　　　　最終修正日 : 2017/07/23