Create jQuery Smooth News Rotator

by Hiroshi on October 30, 2008

in JQuery, Rotators

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

Related Posts

Previous post:

Next post: