`

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
  • Special Examples 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" class="jcarousel-skin-name"> <!-- The content goes in here --></ul>

    jCarousel automatically wraps the required HTML markup around the list. The class attribute applies the jCarousel skin "name" 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 class="jcarousel-skin-name"> <div class="jcarousel-container"> <div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div> <div class="jcarousel-next"></div> <div class="jcarousel-clip"> <ul class="jcarousel-list"> <li class="jcarousel-item-1">First item</li> <li class="jcarousel-item-2">Second item</li> </ul> </div> </div></div>

    As you can see, there are some elements added which have assigned classes (in addition to the classes you may have already assigned manually). Feel free to design your carousel with the classes you can see above.

    Note:

     

    • The skin class "jcarousel-skin-name" 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 to

    null

    , no next-button is created.

      buttonPrevHTML   string  

    <div></div>

     

      The HTML markup for the auto-generated prev button. If set to

    null

    , 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.

     

    • 分享到：
    | swfobject
    评论
    发表评论

    您还没有登录,请您登录后再发表评论

    相关推荐

      jcarousel+jqzoom 实现图片滚动和局部图片放大镜效果

      在构建电子商务网站时...总的来说，jcarousel+jqzoom 的组合是电商网站中提升图片展示效果的有效工具，通过熟练掌握这两个插件的使用，开发者可以创造出更加吸引用户的商品展示区，从而提升网站的用户体验和商业价值。

      基于jquery的特效

      jQuery的许多插件如jCarousel或Slick可以帮助开发者轻松创建这种效果，支持触摸滑动，自动播放，多方向滑动等功能。通过CSS3的transform属性和transition属性，可以实现平滑的过渡效果。 “导航级联”是网页导航...

      超级有用的13个基于jQuery的内容滚动插件和教程

      Image Switch插件专门用于切换图片，它可以用于创建一个平滑的图片滚动效果，让用户在浏览网页时有一种视觉上的享受。 10. jCarousel插件 jCarousel插件允许你将一个标准的JavaScript数组转换成一个可滚动的图片或...

      JQuery广告特效2.7z

      9. **插件使用**: JQuery社区提供了大量预封装的插件，如`jCarousel`、` owl.carousel `等用于实现高级的轮播效果。压缩包中可能包含这些插件的定制版本，以适应特定的广告需求。 10. **性能优化**: 使用JQuery时，...

      jquery1.3aoi 可以下载

      1.3版本的jQuery伴随着丰富的插件生态系统，如用于图片懒加载的Lazy Load，表单验证的validate，以及幻灯片展示的jCarousel等，极大地扩展了jQuery的功能边界。 8. **兼容性** jQuery1.3致力于跨浏览器兼容性，...

    Magicbox
    Global site tag (gtag.js) - Google Analytics