Dynamic Drive has a great javascript vertical marquee called the Cross Browser Marquee II, available for free on their website. By default the marquee will break at the end of the items and display a full blank image until the items start over. I've modified it below where the last item will be followed immediately by the top items again. (Click here to see it in action.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#marqueecontainer{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
background-color:lightyellow;
color:black;
overflow: hidden;
border: 1px solid orange;
padding: 2px;
padding-left: 4px;
text-align:left;
}
#marqueecontainer img {
border-width:2px;
border-style:solid;
}
</style>
<script type="text/javascript">
/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=2 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?
////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''
function scrollmarquee(){
if (parseInt(cross_marquee.style.top)<(actualheight*(-1)+4))
cross_marquee.style.top=(parseInt(cross_marquee2.style.top)+actualheight+4)+"px"
if (parseInt(cross_marquee2.style.top)<(actualheight*(-1)+4))
cross_marquee2.style.top=(parseInt(cross_marquee.style.top)+actualheight+4)+"px"
cross_marquee2.style.top=parseInt(cross_marquee2.style.top)-copyspeed+"px"
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
}
function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee2=document.getElementById("vmarquee2")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.firstChild.offsetHeight
cross_marquee2.style.top=actualheight+4+'px'
cross_marquee2.innerHTML=cross_marquee.innerHTML
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}
if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee
</script>
</head>
<body>
<div style="overflow:hidden">
<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"> <span id="vmarquee" style="position: absolute; width: 98%;">
<center>
<h1>Test1</h1><br />
<h2>Test2</h2><br />
<h3>Test3</h3><br />
<h4>Test4</h4><br />
<h5>Test5</h5><br />
<h6>Test6</h6><br />
</center>
</span><span id="vmarquee2" style="position: absolute; width: 98%;"></span></div> </div>
</body>
</html>