jCarousel 图片展示效果极好的插件
jCarousel
Riding carousels with jQuery
Author: Jan Sorgalla
Version: 0.2.3 (Changelog)
Download: jcarousel.tar.gz or jcarousel.zip
Licence: Dual licensed under the MIT and GPL licenses.Introduction
Examples Getting started Dynamic content loading Configuration Compatibility Credits jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).Simple carousel Vertical carousel Carousel with autoscrolling Carousel illustrating the callback functions Carousel with external controls Carousel with custom start position Multiple carousels on one page Dynamic Examples Carousel with dynamic content loading via JavaScript Carousel with dynamic content loading via Ajax Carousel with dynamic content loading via Ajax from a PHP script Carousel with dynamic content loading via Ajax from the Flickr photo stream Carousel with dynamic content loading via Ajax from the Flickr API Special Examples Circular carousel Using jCarousel as a Textscroller Flexible carousel jCarousel and Thickbox 3 Carousel with custom animation effect jQuery library, the jCarousel source file, the jCarousel core stylesheet file and a jCarousel skin stylesheet file inside the?
<head>
tag of your HTML document:
<script type="text/javascript" src="/path/to/jquery-1.2.1.pack.js"></script><script type="text/javascript" src="/path/to/lib/jquery.jcarousel.pack.js"></script><link rel="stylesheet" type="text/css" href="/path/to/lib/jquery.jcarousel.css" /><link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />
The download package contains some example skin packages. Feel free to build your own skins based on it.
jCarousel expects a very basic HTML markup structure inside your HTML document:
<ul id="mycarousel" to the carousel.
To setup jCarousel, add the following code inside the
<head>
tag of your HTML document:
<script type="text/javascript">jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ // Configuration goes here });});</script>
jCarousel accepts a lot of configuration options, see chapter "Configuration" for further informations.
After jCarousel has been initialised, the fully created markup in the DOM is:
<div has been moved from the
?
<ul>
to the top
<div>
element.
The?first nested?
<div>
under
<div class="jcarousel-container">
illustrates a disabled button, the second an enabled one. The disabled button has the attribute
disabled
(which actually makes no sense for
<div>
elements, but you can also use
<button>
elements or whatever you want) as well as the additional class
jcarousel-prev-disabled
(or
jcarousel-next-disabled
).
All?
<li>
elements of the list have the class
jcarousel-item-n
assigned where
n
represents the position in the list.
Not shown here is, that all classes are followed by additional classes with a suffix dependent on the orientation of the carousel, ie.?
<ul class="jcarousel-list jcarousel-list-horizontal">
for a horizontal carousel.
jQuery Documentation). If set to 0, animation is turned off.?easing?string?null?The name of the easing effect that you want to use (See jQuery Documentation).?auto?integer?0?Specifies how many seconds to periodically autoscroll the content. If set to?
0
(default) then autoscrolling is turned off.
?wrap?string?null?Specifies whether to wrap at the first/last item (or both) and jump back to the start/end. Options are"first"
,
"last"
or
"both"
as string. If set to
null
, wrapping is turned off (default). You can also pass
"circular"
as option to enable support for circular carousels. See the example Circular carousel on how to implement it.
?initCallback?function?null?JavaScript function that is called right after initialisation of the carousel. Two parameters are passed: The instance of the requesting carousel and the state of the carousel initialisation (init, reset or reload)?itemLoadCallback?function?null?JavaScript function that is called when the carousel requests a set of items to be loaded. Two parameters are passed: The instance of the requesting carousel and the state of the carousel action (prev, next or init). Alternatively, you can pass a hash of one or two functions which are triggered before and/or after animation:itemLoadCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
?itemFirstInCallback?function?null?JavaScript function that is called (after the scroll animation) when an item becomes the first one in the visible range of the carousel. Four parameters are passed: The instance of the requesting carousel and the<li>
object itself, the index which indicates the position of the item in the list and the state of the carousel action (prev, next or init). Alternatively, you can pass a hash of one or two functions which are triggered before and/or after animation:
itemFirstInCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
?itemFirstOutCallback?function?null?JavaScript function that is called (after the scroll animation) when an item isn't longer the first one in the visible range of the carousel. Four parameters are passed: The instance of the requesting carousel and the<li>
object itself, the index which indicates the position of the item in the list and the state of the carousel action (prev, next or init). Alternatively, you can pass a hash of one or two functions which are triggered before and/or after animation:
itemFirstOutCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
?itemLastInCallback?function?null?JavaScript function that is called (after the scroll animation) when an item becomes the last one in the visible range of the carousel. Four parameters are passed: The instance of the requesting carousel and the<li>
object itself, the index which indicates the position of the item in the list and the state of the carousel action (prev, next or init). Alternatively, you can pass a hash of one or two functions which are triggered before and/or after animation:
itemLastInCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
?itemLastOutCallback?function?null?JavaScript function that is called when an item isn't longer the last one in the visible range of the carousel. Four parameters are passed: The instance of the requesting carousel and the<li>
object itself, the index which indicates the position of the item in the list and the state of the carousel action (prev, next or init). Alternatively, you can pass a hash of one or two functions which are triggered before and/or after animation:
itemLastOutCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
?itemVisibleInCallback?function?null?JavaScript function that is called (after the scroll animation) when an item is in the visible range of the carousel. Four parameters are passed: The instance of the requesting carousel and the<li>
object itself, the index which indicates the position of the item in the list and the state of the carousel action (prev, next or init). Alternatively, you can pass a hash of one or two functions which are triggered before and/or after animation:
itemVisibleInCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
?itemVisibleOutCallback?function?null?JavaScript function that is called (after the scroll animation) when an item isn't longer in the visible range of the carousel. Four parameters are passed: The instance of the requesting carousel and the<li>
object itself, the index which indicates the position of the item in the list and the state of the carousel action (prev, next or init). Alternatively, you can pass a hash of one or two functions which are triggered before and/or after animation:
itemVisibleOutCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
?buttonNextCallback?function?null?JavaScript function that is called when the state of the 'next' control is changing. The responsibility of this method is to enable or disable the 'next' control. Three parameters are passed: The instance of the requesting carousel, the control element and a flag indicating whether the button should be enabled or disabled.?buttonPrevCallback?function?null?JavaScript function that is called when the state of the 'previous' control is changing. The responsibility of this method is to enable or disable the 'previous' control. Three parameters are passed: The instance of the requesting carousel, the control element and a flag indicating whether the button should be enabled or disabled.?buttonNextHTML?string?<div></div>
?
?The HTML markup for the auto-generated next button. If set tonull
, no next-button is created.
?buttonPrevHTML?string?<div></div>
?
?The HTML markup for the auto-generated prev button. If set tonull
, no prev-button is created.
?buttonNextEvent?string?"click"?Specifies the event which triggers the next scroll.?buttonPrevEvent?string?"click"?Specifies the event which triggers the prev scroll.John Resig for his fantastic jQuery library.jCarousel is inspired by the Carousel Component written by Bill Scott.
?
