Simple jQuery News Ticker Plugin
Very lightweight jQuery dependent news ticker for use with an ordered or un-ordered list. https://github.com/i-like-robots
by aflynt
HTML
<ol id="sample" class="ticker">
<li>Item 1. Lorem ipsum doler sit amet.</li>
<li>Item 2. Lorem ipsum doler sit amet.</li>
<li>Item 3. Lorem ipsum doler sit amet.</li>
<li>Item 4. Lorem ipsum doler sit amet.</li>
<li>Item 5. Lorem ipsum doler sit amet.</li>
</ol>
CSS
.ticker {
margin:0;
padding:5px;
list-style-type:none;
background:#F7F7D0;
border:1px solid #ccc;
}
.ticker li {
line-height:1.5;
}
.ticker-active {
height:1.5em;
overflow:hidden;
}
.ticker-active li {
display:none;
overflow:hidden;
white-space:nowrap;
}
JavaScript
/**
* @author Matt Hinchliffe <http://www.maketea.co.uk>
* @modified 13/05/2011
* @title Simple jQuery News Ticker
*/
(function($)
{
$.fn.Ticker = function(options)
{
var defaults = {
// Time to display each news item. (integer, milliseconds)
pause: 5000,
// Time taken to fade in next news item. (integer, milliseconds)
fadeIn: 800,
// Time taken to fade out current news item. (integer, milliseconds)
fadeOut: 800,
// Pause between displaying each item when fading between items. (integer, milliseconds)
delay: 500,
// Next news item typed out one character at a time. If false item will fade in. (boolean)
typewriter: true,
// Time to type each character if using the typewriter effect (integer, milliseconds)
speed: 35,
// Character to use to mimic a computer cursor if using the typewriter effect (string|boolean)
cursor: '_'
};
// Merge default options with user options
var opts = $.extend({}, defaults, options);
return $(this).each(function()
{
var list = $(this), typewriter = {}, interval;
// Activate ticker and display first item
list
.addClass('ticker-active')
.children(':first')
.css('display', 'block');
function changeItem()
{
var item = list.children(':first'),
next = item.next(),
copy = item.clone();
clearTimeout(interval);
// Append copy of current item to bottom of list
$(copy)
.css('display', 'none')
.appendTo(list);
// Fade current item out, remove from DOM then animate the next item
item.fadeOut(opts.fadeOut, function()
{
...