Create jQuery Smooth News Rotator

Here is a very smooth little jQuery news scroller, ticker or rotator. One news at a time. This rotator adds a vertical news sliding animation with easing effect into content. Script file is as light as 1kb.

Javascript Part

Include this script in head section of web page or via external js file.

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

CSS Part

Include this css in head section.

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

HTML Part

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

Download jQuery News Rotator

7 thoughts on “Create jQuery Smooth News Rotator

  1. Newbie173 Reply

    Thank you very much for sharing!!

    I just have a quick question. It seems that the text flow is slightly disrupted on mouse-over.

    I mean if you put your mouse over the box and move around a bit the text will speed up and sometimes 2 paragraph at a time. Did I do anything wrong or is there anything I can do to fix it? Any help would be appreciated. Thank you again!

  2. miles Reply

    pls help…

    i have this working really well, however one small issue. the scroll items always appear with a higher z-index than anything else, so in my case, they are displayed over menu drop-down items that may come into contact.

    anyone else experienced this?

    any help is really appreciated.

    many thanks

Leave a Reply

Your email address will not be published. Required fields are marked *