jSlots is 2k of jQuery slot machine magic. It turns any list (<ol>
or <ul>
) into a slot machine!
These are the options, with their default values, and what they do
In short, from slot m on row n, the two possible destination slots are m+n and m+n+1. You will only need to set up an array to store all the slots, start with slot one, keep track of the row number and keep the ball falling! The number of slots required is n(n+1)/2, where n is the number of rows.
Attach jQuery (successfully tested down to v1.4.1)
Attach jSlots plugin
Attach easing plugin (optional but HIGHLY recommended for nice animation)
Create a list and an element that will spin the slots
Target the list and make it a jSlot!
Styling is up to you, but jSlots supplies a jSlots-wrapper div around your lists that should get overflow: hidden
and a height set on it. Here are some recommended styles:
Published