背景移動１３■ランダム背景移動左右ボタン

右上のボタンをクリックして
移動を操作できます。
<<で左へ移動、stopで停止、
>>で右へ移動。

●2016/04/02：即時関数で囲んで、グローバル変数を消しました。
背景移動のJavaScriptついては、とらねこ庵とオリジナルJavaScript を参考に、2015/06/16より少しずつリニューアルします。

背景移動と、HIMAJINサイトのボタン操作(JavaScript)を合成して作成しました。
bodyの背景画像が左右に移動するJavaScriptです。
タイトルのの右側に設置したボタンをクリックして、背景画像を右へ移動させたり、左へ移動させたり、停止させたりが可能です。
今回はさらに複数の背景画像のランダム表示を付けたので、ページを開くたびに背景画像と左側の小さな画像が変化します。
ランダムなので、たまに同じ画像が出ることもあります。

ブラウザを更新するか、更新ボタンを押してみて下さい。→

今回も、背景画像サイズ指定を使用。指定は、background-size:auto 700px;です。
この指定は、画像の縦幅だけ700pxに統一して、横幅は自動表示になります。
使用した画像の実寸は横幅195px縦幅500pxです。

■2016/04/02：ボタン操作の参考サイトを変更したので、ソースが短くなりました。

<!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"><!--
body{
background:url(bc6.jpg);/*★背景画像指定。JavaScriptが動作しない時のために指定*/
background-size:auto 700px;/*★縦幅700px。横幅は自動。背景画像実寸は横幅195px縦幅500px。複数画像は違うサイズでも可*/
}

/*★ランダム表示の小さな画像用*/
#GaC{
height:300px;/*★小さな画像縦幅指定。画像サイズがバラバラなので、横幅は自動でauto指定になる*/
border: solid 1px #555;/*★画像枠指定。白色*/
border-radius: 10px;/*★角丸指定*/
}

/*★ボタン指定*/
.btC{
margin-top:-50px;/*★上からの位置*/
text-align:right;/*★右側位置/
padding-right:30px;/*★右側余白指定*/
position:relative;/*★重ね方指定z-indexを入れる為。タイトル等と重ならない場合は、この行と下の行は削除*/
z-index:1;/*★ボタンをタイトルより上に重ねる。上にしないとクリック不可になる*/
}

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

</head>
<body>

<!--★タイトル文字指定。不要なら削除-->
<p class="test1">◎動くJavaScript◎</p>

<!--★ここからコピー。移動ボタン指定。class="btC"を記述-->
<p class="btC">
<input type="button" value="<<" id="bleft" title="左へ移動">
<input type="button" value="stop" id="bstop" title="停止">
<input type="button" value=">>" id="bright" title="右へ移動">
</p>

<!--★小さな画像表示位置。一番最初の画像名と、id="GaC"を記述-->
<img src="bc6.jpg" id="GaC">

<!--★ボタン操作の説明文。不要なら削除-->
<p style="margin-top:-300px;margin-left:auto;color:#f00;background:rgba(255,255,255,0.8);width:200px;padding:10px;">右上のボタンをクリックして<br>移動を操作できます。<br><<で左へ移動、stopで停止、<br>>>で右へ移動。</p>



<script type="text/javascript"><!--
/*====================================================================  
ボタンクリック背景移動左右   ボタン参考：HIMAJIN(http://himajin.moo.jp/java/imgch/frame3.html)★2016/04/02
背景移動参考：とらねこ庵 (http://homepage2.nifty.com/toraneko/index.html)
背景移動参考：オリジナルJavaScript（http://jun88.6.ql.bz/java9/haikei3.htm）　
=====================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

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

var move=4;      //★移動量。大きいほど速い
var Bspd=100;　  //★数値を小さくするほど速い

//指定ここまで--------------------------------------------------------------
var i=Math.floor(Math.random()*ga.length);
document.body.style.backgroundImage="url("+myurl+ga[i]+")";
document.getElementById("GaC").src=myurl+ga[i];/*■小さな画像表示が不要なら、この１行を削除してHTMLの#GaC指定分も削除*/
var flag_c=1, xp=0;
function bgGo() {
if(!flag_c){xp+=move;}/*右へright*/
else if(flag_c===1){xp-=move;}/*左へleft*/
document.body.style.backgroundPosition=xp+"px "+0+"px";
setTimeout(bgGo, Bspd);
}
bleft.onclick=function(){flag_c=1;}/*左へleft*/
bstop.onclick=function(){flag_c=2;}/*停止*/
bright.onclick=function(){flag_c=0;}/*右へright*/
bgGo();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

背景移動１３■ランダム背景移動左右ボタン 最終修正日 : 2016/04/02

　背景移動１３■ランダム背景移動左右ボタン　　　　　最終修正日 : 2016/04/02