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
   
Fancy jQuery Plugin For Roulette Image - roulette.js

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.