Simple jQuery Text Rotator Plugin For News Ticker On Your Site

File Size: 7.96KB
Views Total: 11618
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple jQuery Text Rotator Plugin For News Ticker On Your Site

News Ticker is a simple jQuery plugin for creating a cross-browser news ticker widget with a simple fade-in text rotating effect. The plugin also provides some functions to control the news widget out of the box, like prev, next, play or pause.

Basic Usage:

1. Load the jQuery javascript library and jQuery news ticker plugin in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/newsTicker.js"></script>

2. Create a container for the news ticker. And then create a ul list that the plugin will populate the news array from li elements.

<div id="newsData"></div>
<ul id="newsList">
<li class="news-item"> Item 1 </li>
<li class="news-item"> Item 2 </li>
<li class="news-item"> Item 3 </li>
</ul>

3. Call the plugin on the ul list.

<script>
$(function () {
$('#newsList').newsTicker();
});
</script>

4. Create some buttons to control the news slider manually.

<input type="button" id="prevDiv" value="Prev"> 
<input type="button" id="nextDiv" value="Next"> 
<input type="button" id="play-pause" value="Play/Pause">

5. set values and custom functions

<script>
$(function () {
$('#newsList').newsTicker({
interval: "4000", // Timeout interval between two news
newsData: "#newsData", // Div where news will appear 
prevBtnDiv: "#prevDiv", // Prev button/div id 
nextBtnDiv: "#nextDiv", // Next button/div id 
playPauseID: "#play-pause", // Play/Pause toggle button/div id
effect: "fadeIn", // Transition effect
});
});
</script>

This awesome jQuery plugin is developed by jayeshmagare/. For more Advanced Usages, please check the demo page or visit the official website.