Jquery Text Rotator ...

In this tutorial you will know how to add jquery text rotator, . This rotator adds a vertical news sliding animation with easing effect into content.

1- We will add javascipt code:

<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( op,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( op,210px);
   });
   $("div.headline:eq(" + current_headline + ")").show().animate({top: 5},"slow"); 
   old_headline = current_headline;
 }
</script>

2- We will add css code:

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

3- we will add HTml code:

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

 Original Source: