jQuery Scroller with Sprites

Jobs from Indeed
Published:
By:

This simple script introduces a few web site development concepts and techniques that come in handy when designing and developing web sites. The tutorial that entails this script introduces the concept of a slider or scroller, sprites for graphical control elements, and jQuery events.

jQuery Scroller Design

It starts with a simle design concept for a small horizontal slider that allows the web site developer to embed several slides with images and text and the user can then use controls on either end of the scroller to scroll the content.

 


jQuery Scroller Control Sprites

The controls in the scroller utilize sprites in a single image to display the multiple states for each control. The tutorial goes over the sprite concept and the use of CSS to manipulate the sprite displayed in each control element.

 

With the addition on some jQuery event binding for mouse hover and mouse click the end result is a simple scroller that can be used as the basis of understanding and developing similar sliders or utilizing sprite techniques.

The demo of this simple scroller can be viewed here.

Or you can download all the demo source code here.



Sidebar Item