Comment Del.icio.us Digg Reddit Technorati Furl

Create jQuery Smooth News Rotator

Oct 30, 2008 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

Tags: , , , ,
Try Random Style!


5 Responses to “Create jQuery Smooth News Rotator”

  1. May 6th, 2009 at 9:24 pm
    pj koorn Says:

    works really good, thanks for the post


  2. August 18th, 2009 at 10:06 am
    eshanne Says:

    I think that script wont work with FF 3.5.2 can you double check please..

    Thanx..
    eshanne


  3. August 20th, 2009 at 3:03 am
    Gustavo Says:

    I appreciate a demo.


  4. September 30th, 2009 at 1:01 am
    fano Says:

    It will be good to see a working demo before downloading ;)
    Good stuff though!


  5. January 18th, 2010 at 4:51 pm
    Jezhug Says:

    Brilliant! Just what I had been searching for. Just had to replace the jquery-test.js to http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js and it was up and running.


Leave a Reply