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

<!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:450px;height:250px; }/*★必須。スライド画像の縦と横のサイズ*/

#bsY{
position:relative;/*★基準位置指定。必ずposition:●●;を使用して指定すること*/
margin:10px auto 50px;/*★中央配置(上、 左右、下）。お好みで*/
overflow:hidden;/*★必須。bsY領域からはみ出た分は非表示*/
}
#bsY div{position:absolute;}/*★必須*/
--></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++]=["pan25.jpg", "http://www.yahoo.com"];
gaY[n++]=["pan26.jpg", "http://www.google.com"];
gaY[n++]=["pan27.jpg", ""];
gaY[n++]=["pan28.jpg", ""];
gaY[n++]=["pan29.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)*(-1)。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][1]!="")?'<a href='+gaY[n][1]+' target='+tgt+'><img src='+gaY[n][0]+'></a>':'<img src='+gaY[n][0]+'>';
	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
