面白１１■消せる移動スライドショー

●2017/08/20：即時関数で囲んで、グローバル変数を消しました。
ドラッグすると、スライドショーが移動します。
画像の下の×印をクリックするか、左上のCloseボタンをクリックすると、スライドが消えます。
消えたスライドは、Openボタンをクリックで再び表示され、スライドショーも消えた瞬間の続きから始まります。
Resetボタンを押すと、スライドショーは最初の位置に戻り、最初の画像から開始します。

前回掲載分よりソースが短く、移動の動きがスムーズになりました。
2015/03/19：ドラッグ動作は、青い部分をマウスオンしてだったのが、画像のマウスオンでも可能になりました。
ドラッグ移動の原本はCodaholicから。
divの中のimgもドラッグする方法はt87rから。

■同じ原本を利用したメモ紙の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><!--
#waku{    /*★スライドショー本体*/
position:absolute;/*★この１行は削除不可。後は好みで*/
top:120px;
left:20px;
background:#55f;/*★スライド画像の背景色　青*/
padding:5px 40px 40px 5px;/*★スライド画像周囲の余白（時計回りに上、右、下、左）*/
width:370px;/*★画像横サイズと同じ*/
height:245px;/*★画像縦サイズと同じ*/
border-radius: 0px 20px;/*★右上と左下の角丸指定*/
box-shadow: 5px 5px 10px #666;/*★青色領域に影。不要なら削除*/
cursor:move;/*★カーソルが移動の形*/
}

#bt{
position:fixed;/*★ボタンの位置固定。不要なら削除*/
top:70px;/*★ボタンの上からの位置*/
left:20px;/*★ボタンの左からの位置*/
}

#bt input{   /*★ボタンの装飾*/
width:60px;
background:#55f;
color:#fff;
font-size:90%;
text-align:center;
margin:2px;
cursor:pointer;/*★カーソルが手の形*/
}

#clo_d{text-align:right;}/*★スライド画像の×印の位置　右*/

#clo{   /*★×印の装飾*/
color:#fff;/*★文字色　白*/
cursor:pointer;/*★カーソルが手の形*/
font-weight:bold;/*★太字*/
font-size:130%;/*★文字サイズ*/
}
--></style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。スライドショー位置指定。最初の画像名記述。id指定は必須-->

<div id="waku" title="ドラッグで移動">
<img src="../image/fp21.jpg" id="Ga"></a>
<div id="clo_d"><span id="clo" title="閉じる">×</span></div>
</div>

<!--★↓はボタン指定。id指定は必須-->
<div id="bt">
<input type="button" value="Close" id="bt1" title="閉じる">
<input type="button" value="Open" id="bt2" title="再開">
<input type="button" value="Reset" id="bt3" title="元の位置へ">
</div>

<script type="text/javascript"><!--
/*=====================================================================
消せる移動スライドショー　★2017/08/20
ドラッグ移動 By http://codaholic.org/?p=1071 (サイト名　Codaholic)
divの中のimgの移動 By　https://t87r.wordpress.com/2011/05/26/how-to-disable-events-related-to-mouse-and-click-of-a-particular-element-by-javascript/ (サイト名　t87r)
=======================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

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

//指定ここまで----------------------------------------------------------
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=0;
function Show(){
$("Ga").src =myurl+ga[i%len]; $("Ga").style.display="block"; i++; setTimeout(Show,speed);
}
//ドラッグ移動----------------------------
var box=$("waku");
function closeit(){box.style.visibility="hidden";}
function showit(){box.style.visibility="visible";}
function drag(){
var flag, x, y;
box.onmousedown=function(e){flag='on'; y=e.pageY-box.offsetTop; x=e.pageX-box.offsetLeft;}
document.onmouseup=function(){flag='off';}
document.onmousemove=function(e){if(flag==='on'){box.style.top=e.pageY-y+'px'; box.style.left=e.pageX-x+'px';}}
disableClickEvent(Ga);
}
function disableClickEvent(Ga){   /*画像をマウス動作に反応させない*/
Ga.onmousedown=function (){return false;};
Ga.onmouseup=function (){return false;};
Ga.onmousemove=function (){return false;};
}
drag();Show();

$("bt1").onclick=closeit;
$("bt2").onclick=showit;
$("bt3").onclick=function (){location.reload()};
$("clo").onclick=closeit;
}());//即時関数終了
//--></script>
<!--★ここまでコピー。終わり-->

</body>
</html>

面白１１■消せる移動スライドショー 最終修正日 : 2017/08/20

　面白１１■消せる移動スライドショー　　　　最終修正日 : 2017/08/20