<script language="javascript" type="text/javascript">
 var headline_count;
 var headline_interval;
 var old_headline = 0;
 var current_headline = 0;
 $(document).ready(function(){
   headline_count = $("div.headline").size();
   $("div.headline:eq("+current_headline+")").css('top','5px');
   headline_interval = setInterval(headline_rotate,5000); //time in milliseconds
   $('#scrollup').hover(function() {
     clearInterval(headline_interval);
   }, function() {
     headline_interval = setInterval(headline_rotate,5000); //time in milliseconds
     headline_rotate();
   });
 });
 function headline_rotate() {
   current_headline = (old_headline + 1) % headline_count; 
   $("div.headline:eq(" + old_headline + ")").animate({top: -205},"slow", function() {
     $(this).css('top','210px');
   });
   $("div.headline:eq(" + current_headline + ")").show().animate({top: 5},"slow");  
   old_headline = current_headline;
 }
</script>

<style type="text/css">
 #scrollup {
   position: relative;
   overflow: hidden;
   border: 1px solid #000;
   height: 200px;
   width: 200px
 }
 .headline {
   position: absolute;
   top: 210px;
   left: 5px;
   height: 195px;
   width:190px;
 }
</style>

<div id="scrollup">
 
<div class="headline">
<strong>content 1 ...</strong>
<br />
This is content number 1
</div> 
 
<div class="headline">
<strong>content 2 ...</strong>
<br />
This is content number 2
</div> 
 
<div class="headline">
<strong>content 3 ...</strong>
<br />
This is content number 3
</div> 
 
<div class="headline">
<strong>content 4 ...</strong>
<br />
This is content number 4
</div>     
 
</div>