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 |
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.