Sunday, April 10, 2011

Jquery News Sliders

News broadcasting is becoming a no optional feature in most of the intranet as well as internet corporate portals.  

We can create different form of News slider in JQuery with very few lines of code.

Horizontal News feed:
1.Create a UI list with many items.

<ul  id='listslider'>
<li>Indian Presidents congratulates Indian Cricket team on winning world cup</li>
<li>Shoot out in Libya</li>
<li>Weather gets worst in New york</li></ul>

2. Add a script as below(only 3 lines of code).

$(document).ready(function(){
var interval=setInterval(newslider, 2000);
});

function newsslider()
{
var last=$('ul#listslider li:last').hide().remove();
$('ul#listslider li:last').prepend(last);
$('ul#listslider li:last').slidedown.show();
}

if you want to stop the slider, just call the below script
clearInterval(interval);

In my next article I will post how to create a  vertical news slider.


No comments:

Post a Comment