jShowOff: a jQuery Content Rotator

jShowOff is a jQuery plugin for creating a rotating content module. It works by creating 'slides' from the child elements (eg. <li>) inside a specified wrapper element (eg. <ul>) on which .jshowoff() is invoked. It then rotates through the slides, with options for controls, links, and more. This type of module is often used to promote pages, sections, or features on a site.

Required Files

  1. the jQuery Core JavaScript Library (1.3+)
  2. jquery.jshowoff.min.js

To get jShowOff up and running, simply include the above files on your page, create the required slides markup and invoke the method (example below). You can use the default skin (jshowoff.css) from the demo, or restyle the elements to your liking. NOTE: Source files are maintained at github.com/ekallevig/jShowOff.

How to Use

The required markup for jShowOff is a parent element with one or more child elements, which are used as the 'slides'. The following is a basic example:

<div id="features">
	<div><p>This is a slide!</p></div>
	<div><a href="http://google.com"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Google Logo" /></a></div>
</div>
<script type="text/javascript">		
	$(document).ready(function(){ $('#features').jshowoff(); });
</script>

Options

jShowOff has several options for customization. Pass these settings as an object to the .jshowoff() method like this:

$('#features').jshowoff({ speed:1500, links: false }); });
Property Type Default Description
animatePause boolean true Whether to use 'Pause' animation text when pausing.
autoPlay boolean true Whether to start playing immediately.
changeSpeed integer 600 Speed of transition in milliseconds.
controls boolean true Whether to create & display controls (Play/Pause, Previous, Next).
controlText object { play:'Play', pause:'Pause', previous:'Previous', next:'Next' } Text to use for controls (Play/Pause, Previous, Next). For multi-language support, etc.
cssClass string true Add an additional custom class to the .jshowoff wrapper.
effect string 'fade' Type of transition effect: 'fade', 'slideLeft' or 'none'.
hoverPause boolean true Whether to pause on hover.
links boolean true Whether to create & display numeric links to each slide.
speed integer 3000 Time each slide is shown in milliseconds.
Shore
Eddie

HTML Slide

Example of an HTML slide.

Lorem ipsum dolor sit amet, nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.

Learn More ›

Flower
Fern

Sliding Effect & Custom Labels Demo

Shore
Eddie

HTML Slide

Example of an HTML slide.

Lorem ipsum dolor sit amet, nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.

Learn More ›

Flower
Fern

Control-less, Effect-less Demo

Shore
Eddie

HTML Slide

Example of an HTML slide.

Lorem ipsum dolor sit amet, nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.

Learn More ›

Flower
Fern

Re-styled Thumbnail Demo

Mountain
Mountain
Mountain
Mountain

适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

来源:Gxl网-jquery插件