News List is a jQuery plugin that transforms a simple HTML group of news items into an auto-cycling slideshow that can also be manipulated manually to show an individual item.
First, include the jQuery library, jquery.newslist.js, newslist.css in your <head> tag:
<link type="text/css" href="/css/newslist.css" rel="stylesheet" media="screen"/>
<script type="text/javascript" src="/js/jquery.newslist.js"></script>Then create a simple HTML structure like so:
<div id="newslist">
<div class="items">
<div class="item">News item #1.</div>
<div class="item">News item #2.</div>
<div class="item">News item #3.</div>
<div class="item">News item #4.</div>
</div>
<div class="controls"></div>
</div>
Finish by calling the newslist function on the outermost element:
<script type="text/javascript">
$("#newslist").newslist();
</script>
And huzzah, the magic is done.
- itemsDiv: the div containing the news items. Defaults to “.items”.
- item: the class for the div containing an individual news item. Defaults to “.item”.
- controlsDiv: the div where the control links for each news item will be created. Defaults to “.controls”.
- cycler: is the auto-cycling of news items on? Defaults to “true”.
- hoverClass: class for links that are active/on. Defaults to “on”.
- cycleSpeed: how fast, in milliseconds, the news items should cycle. Defaults to “10000”.
- fadeSpeed: how fast, in milliseconds, each new news item should fade in. Defaults to “1000”.
- maxLoops: how many times all of the news items should loop. If null, will loop indefinitely. Defaults to “null”.
- leadZero: should control links have a leading zero for numbers 1-9? Defaults to “false”.