縦スライド２-１■下→上の重ね移動・オン停止リンク有コメ付

<!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"><!--
#bsY,#bsY div{
width:400px;/*★必須。スライド画像の横幅*/
height:400px;/*★必須。スライド画像の縦幅。画像の中にコメントを入れたので、画像ピッタリの縦幅。画像の外に出すならコメント分の縦幅を足す*/
}

#bsY{
position:relative;/*★基準位置指定。必ずposition:●●;を使用して指定すること*/
margin:10px auto 50px;/*★中央配置(上、 左右、下）。お好みで*/
overflow:hidden;/*★必須。bsY領域からはみ出た分は非表示*/
border:solid 1px #000;/*★枠線黒色。お好みで*/
}

#bsY div{/*★コメントが画像外なら、コメント部分の背景色はここで指定*/
position:absolute;/*★必須。#bsYを基準とした位置指定*/
}

/*★以下がコメント部分の指定*/
#bsY p{
position:absolute;/*★必須。#bsYを基準とした位置指定*/
bottom:-16px;/*★下からの位置*/
padding-left:20px;/*★コメント文字の左からの位置*/
color:#000;/*★文字色　黒色*/
font-size:16px;/*★文字サイズ*/
background:rgba(255,255,255,0.4);/*★背景透過指定。0は完全透過。1は完全不透過。40%不透過指定。コメントが画像外ならこの行の指定は削除*/
width:100%;/*★コメント領域(p)はスライド画像横幅一杯。コメントが画像外ならこの行の指定は削除*/
height:30px;/*★コメント領域の縦幅。お好みで*/
line-height:30px;/*★行間をコメント領域の縦幅と同じ指定にすると、文字の上下の中央位置指定*/
}
--></style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>
<br>
<p style="text-align:center;">画像マウスオンで停止します</p>

<!--★コピーここから。下の１行がスライドショー位置指定。id="bsY"は必須-->
<div id="bsY"></div>

<script type="text/javascript"><!--
/*========================================================================
上から下へ重なる横移動のスライドショー・マウスオン停止リンク有コメント付き　★2016/01/24 外部js展開して簡略化。上→下を下→上へ
Drop-in Slideshow Script- by Dynamic Drive (http://www.dynamicdrive.com)* Last updated: March 9th, 2007
This notice must stay intact for legal use.　Visit http://www.dynamicdrive.com/ for full source code
=========================================================================*/
(function (){var n=0;//即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像等の同時指定。増減可能。["画像","コメント","リンク"];　の３個をこの順番で記述。リンクが無い時は["画像","コメント",""];で
var gaY=new Array();
gaY[n++]=["kig4.jpg","宇宙船", "http://www.yahoo.com"];
gaY[n++]=["kig1.jpg","シャチ", "http://www.google.com"];
gaY[n++]=["cc1.jpg","海底を泳ぐマンタ", ""];
gaY[n++]=["kig2.jpg","稲妻", ""];
gaY[n++]=["kig3.jpg","飛行船", ""];

var delayY=3000;//★スライドの静止時間。1000=1秒
var spdY=30;    //★原本30。スライドの方向移動速度。数値が大きいと遅い Delay between slide animation (< is faster)
var stepY=10;   //★原本10。変化px。大きいほど速い。#bsYの縦幅が割り切れる数値で指定するとスムーズ。 Slide degree (> is faster)
var tgt="_new"; //★リンクのtarget指定。「_top」「_new」等。ブラウザによって、リンク先から戻った時の動作が違います

var load=new Array();for (var p=0;p<gaY.length;p++){load[p]=new Image();load[p].src=gaY[p];}//画像先読み込み
function DS(h){
        this.createcontainer(h);//原本parseInt(h)
	this.animatestartpos=h;//原本parseInt(h)。Starting "top" position of an image before it drops in ■修正
	this.i=this.ci=this.zindex=this.flg=0; //iはCurrent "active" canvas- Two canvas DIVs in total
	this.init();
}
DS.prototype.createcontainer=function(h){
var sss='<div style="top:0;left:0;"></div><div style="top:-'+h+'px;left:0;"></div>';//■修正
bsY.innerHTML=sss;
	this.e=document.getElementById("bsY");
	this.canvases=[];
	this.canvases[0]=this.e.childNodes[0];
	this.canvases[1]=this.e.childNodes[1];
}
DS.prototype.populatecanvas=function(cnvs, n){
	var ggg=(gaY[n][2]!="")?'<a href='+gaY[n][2]+' target='+tgt+'><img src='+gaY[n][0]+'></a><p>'+gaY[n][1]+'</p>':'<img src='+gaY[n][0]+'><p>'+gaY[n][1]+'</p>';
	cnvs.innerHTML=ggg;
}//■修正
DS.prototype.animateslide=function(){
	if (this.y>0){this.y-=stepY;this.activecanvas.style.top=this.y+"px";} //if image hasn't fully dropped in yet//■修正
	else{
		clearInterval(this.animatetimer);
		this.activecanvas.style.top=0;
		this.setupnextslide();
		var sw=this;
		setTimeout(function(){sw.rotateslide()}, delayY);
	}
}
DS.prototype.setupnextslide=function(){
	this.i=(this.i==0)? 1 : 0;
	this.activecanvas=this.canvases[this.i];
	this.activecanvas.style.top=this.animatestartpos+"px";
	this.y=this.animatestartpos;
	this.activecanvas.style.zIndex=(++this.zindex);
	this.ci=(this.ci<gaY.length-1)? this.ci+1 : 0;
	this.populatecanvas(this.activecanvas, this.ci);
}
DS.prototype.rotateslide=function(){
	var sw=this;
	if (this.flg){setTimeout(function(){sw.rotateslide()}, 50)}
	else{this.animatetimer=setInterval(function(){sw.animateslide()}, spdY)}
}
DS.prototype.init=function(){
	var sw=this;
	this.populatecanvas(this.canvases[this.i], 0);
	this.setupnextslide();
	this.e.onmouseover=function(){sw.flg=1}
	this.e.onmouseout=function(){sw.flg=0}
	setTimeout(function(){sw.rotateslide()}, delayY);
}
new DS(bsY.clientHeight);
}());//即時関数終了
//--></script>
<!--★コピーここまで-->

</body>
</html>
縦スライド２-１■下→上の重ね移動・オン停止リンク有コメ付 最終修正日 : 2016/01/24

　縦スライド２-１■下→上の重ね移動・オン停止リンク有コメ付　　　　最終修正日 : 2016/01/24
