Fancy jQuery Plugin For Roulette Image - roulette.js
File Size: | 167KB |
---|---|
Views Total: | 24382 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
roulette.js is a fancy and simple jQuery plugin for Roulette Image that scrolls down a group of images and then displays a specified image to you. The speed, duration and stop image can be customized through javascript.
How to use it:
1. Include jQuery library, jQuery UI and roulette.js on your web page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> <script src="../roulette.js"></script>
2. Markup
<div class="roulette" style="display:none;"> <img src="star.png"/> <img src="flower.png"/> <img src="coin.png"/> <img src="mshroom.png"/> <img src="chomp.png"/> </div>
3. The javascript
var option = { speed : 10, duration : 3, stopImageNumber : 0, startCallback : function() { console.log('start'); }, slowDownCallback : function() { console.log('slowDown'); }, stopCallback : function($stopElm) { console.log('stop'); } } $('div.roulette').roulette(option);
This awesome jQuery plugin is developed by akira-kuriyama. For more Advanced Usages, please check the demo page or visit the official website.