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

<!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>

<!--★ここからコピー-->
<script type="text/javascript">
<!--
/*=============================================================================
Drop-in Slideshow Script- by Dynamic Drive (http://www.dynamicdrive.com)
This notice must stay intact for legal use.
Visit http://www.dynamicdrive.com/ for full source code
=============================================================================*/
/*★dropinslideshow.jsの展開分なので、ここから中身を触らない*/
/*-------------------------------------------------------------------*/
/* Drop-in Slideshow Script- By Dynamic Drive, available at: http://www.dynamicdrive.com*/
/* Last updated: March 9th, 2007*/
/*-------------------------------------------------------------------*/
var _dropinslideshowcount=0

function dropinslideshow(imgarray, w, h, delay){
	this.id="_dropslide"+(++_dropinslideshowcount) //Generate unique ID for this slideshow instance (automated)
	this.createcontainer(parseInt(w), parseInt(h))
	this.delay=delay
	this.imgarray=imgarray
	var preloadimages=[]
	for (var i=0; i<imgarray.length; i++){
		preloadimages[i]=new Image()
		preloadimages[i].src=imgarray[i][0]
	}
	this.animatestartpos=parseInt(h)*(-1) //Starting "top" position of an image before it drops in
	this.slidedegree=10 //Slide degree (> is faster)
	this.slidedelay=30 //Delay between slide animation (< is faster)
	this.activecanvasindex=0 //Current "active" canvas- Two canvas DIVs in total
	this.curimageindex=0
	this.zindex=100
	this.isMouseover=0
	this.init()
}

dropinslideshow.prototype.createcontainer=function(w, h){
 document.write('<div id="'+this.id+'" style="position:relative; width:'+w+'px; height:'+h+'px; overflow:hidden">')
	document.write('<div style="position:absolute; width:'+w+'px; height:'+h+'px; top:0;"></div>')
	document.write('<div style="position:absolute; width:'+w+'px; height:'+h+'px; top:-'+h+'px;"></div>')
	document.write('</div>')
	this.slideshowref=document.getElementById(this.id)
	this.canvases=[]
	this.canvases[0]=this.slideshowref.childNodes[0]
	this.canvases[1]=this.slideshowref.childNodes[1]
}

dropinslideshow.prototype.populatecanvas=function(canvas, imageindex){
	var imageHTML='<img src="'+this.imgarray[imageindex][0]+'" style="border: 0" />'
	if (this.imgarray[imageindex][1]!="")
		imageHTML='<a href="'+this.imgarray[imageindex][1]+'" target="'+this.imgarray[imageindex][2]+'">'+imageHTML+'</a>'
	canvas.innerHTML=imageHTML
}

dropinslideshow.prototype.animateslide=function(){
	if (this.curimagepos<0){ //if image hasn't fully dropped in yet
		this.curimagepos=this.curimagepos+this.slidedegree
		this.activecanvas.style.top=this.curimagepos+"px"
	}
	else{
		clearInterval(this.animatetimer)
		this.activecanvas.style.top=0
		this.setupnextslide()
		var slideshow=this
		setTimeout(function(){slideshow.rotateslide()}, this.delay)
	}
}

dropinslideshow.prototype.setupnextslide=function(){
	this.activecanvasindex=(this.activecanvasindex==0)? 1 : 0
	this.activecanvas=this.canvases[this.activecanvasindex]
	this.activecanvas.style.top=this.animatestartpos+"px"
	this.curimagepos=this.animatestartpos
	this.activecanvas.style.zIndex=(++this.zindex)
	this.curimageindex=(this.curimageindex<this.imgarray.length-1)? this.curimageindex+1 : 0
	this.populatecanvas(this.activecanvas, this.curimageindex)
}

dropinslideshow.prototype.rotateslide=function(){
	var slideshow=this
	if (this.isMouseover)
		setTimeout(function(){slideshow.rotateslide()}, 50)
	else
		this.animatetimer=setInterval(function(){slideshow.animateslide()}, this.slidedelay)
}

dropinslideshow.prototype.init=function(){
	var slideshow=this
	this.populatecanvas(this.canvases[this.activecanvasindex], 0)
	this.setupnextslide()
	this.slideshowref.onmouseover=function(){slideshow.isMouseover=1}
	this.slideshowref.onmouseout=function(){slideshow.isMouseover=0}
	setTimeout(function(){slideshow.rotateslide()}, this.delay)
}
/*★dropinslideshow.jsの展開分なので、ここまで中身を触らない*/
// -->
</script>
<!--★コピーここまで。別に、bodyの中にもコピーがあります-->

</head>
<body>

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

<div style="width:370px;margin:50px auto;"><!--★←スライド画像の位置指定。指定しないと、左上に表示する-->
<!--★ここからコピー-->
<script type="text/javascript">
<!--
/*Define Image Array. Syntax: ["image_path", "url_destination", "url_target"] */
/*★ ["画像名", "リンク先", "target方法_blankより_newがお勧め"　リンク無なら"",""で。 画像は増減できます]*/
var myimages=new Array()
myimages[0]=["gy3.jpg", "", ""]
myimages[1]=["gy4.jpg", "http://www.dynamicdrive.com", "_new"]
myimages[2]=["gy5.jpg", "http://www.javascriptkit.com", "_new"]
myimages[3]=["gy6.jpg", "", ""]
myimages[4]=["a3.jpg", "", ""]

//Create new drop-in slideshow
/*Syntax: new dropinslideshow(image_array, slideshow_width, slideshow_height, delay_before_rotation)*/
/*★myimages,の後に画像の横サイズ,縦サイズ,スライドの切替時間1000で１秒。画像のサイズは揃える*/
new dropinslideshow(myimages, 370, 245, 3000)
// -->
</script>
<!--★コピーここまで-->
</div><!--★スライド画像位置指定の終了-->


<!--●もし展開分を外部jsに戻したら、呼び出す時に</title>～</head>の間に↓を記述。外部jsの名前は「dropinslideshow.js」で。
<script type="text/javascript" src="dropinslideshow.js">
/*====================================================================
Drop-in Slideshow Script- by Dynamic Drive (http://www.dynamicdrive.com)
This notice must stay intact for legal use.
Visit http://www.dynamicdrive.com/ for full source code
=====================================================================*/
</script>
●呼び出しここまで-->


</body>
</html>