/*
<div id="scrollup">
  <div class="headline"> ... </div>
  <div class="headline"> ... </div>
  <div class="headline"> ... </div>
  <div class="headline"> ... </div>
</div>

#scrollup {
  position: relative;
  overflow: hidden;
  border: 1px solid #000;
  height: 200px;
  width: 200px
}
.headline {
  position: absolute;
  top: 210px;
  left: 5px;
  height: 195px;
  width:190px;
}
*/

var headline_count;
var headline_interval;
var old_headline = 0;
var current_headline = 0;

jQuery(document).ready(function()
{
  headline_count = jQuery("div.headline").size();
  jQuery("div.headline:eq("+current_headline+")").css('top','5px');

  headline_interval = setInterval(headline_rotate,5000); //time in milliseconds
  jQuery('#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;
  jQuery("div.headline:eq(" + old_headline + ")").animate({top: -205},"slow", function() {
    jQuery(this).css('top','210px');
  });
  jQuery("div.headline:eq(" + current_headline + ")").show().animate({top: 5},"slow");
  old_headline = current_headline;
}