`

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
    评论
    发表评论

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

    相关推荐

      jqzoom + jcarousel图片展示

      标题“jqzoom + jcarousel图片展示”涉及到两个主要的JavaScript库——jqZoom和jCarousel，它们都是用于网页中图片展示和交互的工具。jqZoom主要用于实现图片的放大预览效果，而jCarousel则是一个强大的jQuery插件，...

      jCarousel图片滚动插件 jquery图片滚动

      jCarousel图片滚动插件 jquery图片滚动 jCarousel 是个非常好看又好用的内容滚动切换插件，可以实现按序水平或垂直方向的内容列表的切换。 滚动切换的内容可以是静态的HTML内容，也可以是JS的对象列表，也可以是...

      jquery插件jcarousel制作滚动效果

      jCarousel 是一款基于jQuery的插件，专门用于创建各种类型的滚动效果，无论是图片展示还是文本滚动，都能轻松实现。 ## 1. jCarousel 的核心功能 jCarousel 提供了灵活的配置选项和丰富的API接口，使得开发者可以...

      jQuery插件_jcarousel(用于图片滚动)

      `jcarousel`是一个非常流行的jQuery插件，专为创建功能丰富的图片轮播、滑动展示和旋转木马效果而设计。它提供了高度自定义的选项，使开发者能够轻松地在网站上添加交互式的图片滚动效果。这个插件适用于那些希望在...

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

      在压缩包文件"买卖提商品图片放大镜效果"中，可能包含了实现这一功能的示例代码、CSS样式和图片资源，通过研究这些文件，开发者可以更好地理解和应用这两种插件，以创建出类似的交互式图像展示功能。

      jcarousel图片效果

      **Jcarousel图片效果详解** Jcarousel是一款非常流行的JavaScript图片轮播插件，它以其高度定制化和出色的用户体验而受到广大Web开发者的喜爱。这个插件能够实现图片的向上、向下滚动，以及其他各种动态展示效果，...

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

      在这个项目中，`jQuery` 被用来实现两种关键功能：图片滚动（通过 `jcarousel` 插件）和局部图片放大镜效果（通过 `jqueryzoom` 插件）。下面我们将详细介绍这两个功能及其背后的原理。 1. **`jcarousel` 插件**：`...

      jquery插件 jcarousel包以及使用的小例子

      jCarousel是一款基于jQuery的开源轮播图插件，它提供了丰富的功能和自定义选项，使开发者能够轻松创建各种各样的滑动效果，如图片滑动、内容滚动等。这个包包含了jCarousel的核心库文件和其他相关资源，为快速集成到...

      jQuery轮播图插件jCarousel

      总结，jCarousel作为一款强大的jQuery轮播图插件，不仅提供了丰富的预设效果，还允许开发者通过自定义选项和API实现更多个性化功能。无论是新手还是经验丰富的前端开发人员，都能从中受益，轻松创建出令人满意的轮播...

      jcarousel点击图片滚动

      `jCarousel` 是一个非常流行的 jQuery 插件，主要用于创建可滚动的图片或内容列表。它以其强大的功能和灵活性在网页开发中被广泛使用，尤其适用于创建滑动展示、轮播效果或产品展示等应用场景。在“jcarousel点击...

      国外优秀图片展示插件

      总结来说，“国外优秀图片展示插件”提供了一种强大的工具，即jCarousel，用于在网页上创建各种动态图片展示效果。开发者可以根据项目需求定制这些效果，提升网站的视觉表现力和用户体验。无论是新手还是经验丰富的...

      jQuery滚动切换传送插件jCarousel使用简介

      jCarousel是一款基于jQuery库的高效、灵活且功能丰富的滚动切换插件，适用于创建各种类型的轮播、滚动列表或者产品展示。这款插件以其简单易用的API和丰富的自定义选项，深受开发者喜爱。在本文中，我们将深入探讨...

      jQuery图片点击切换插件jCarousel.zip

      这段代码将对ID为'mycarousel'的元素应用jCarousel插件，并设置为水平展示，每次显示3张图片，每次滚动1张。 jCarousel的HTML结构通常包含一个ul列表，其中li元素表示每张图片或内容。CSS样式则用来控制图片的布局...

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

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

      jcarousel包

      "jcarousel包"是一个专为前端网页设计的插件，其主要目的是为了实现高质量的图片展示效果，特别是在创建PPT（PowerPoint）风格的轮播功能时。在网页设计中，这种轮播效果通常用于产品展示、图片画廊或者新闻更新等...

      E_jquery图片滚动切换插件 jCarousel Lite

      `jCarousel Lite`是基于jQuery的一款轻量级的图片轮播插件，它能够帮助开发者轻松实现各种灵活的图片滚动切换效果，为网站增添动态美感。 ### 1. jCarousel Lite概述 `jCarousel Lite`是一款高效、简洁的jQuery...

      jquery抽屉式图片展示效果.rar

      《jQuery抽屉式图片展示效果实现详解》 在网页设计中，吸引用户的注意力并提供良好的交互体验至关重要。jQuery作为一种强大的JavaScript库，为开发者提供了丰富的工具和方法，使得创建动态、富有创意的用户界面变得...

      jCarousel是一个jQuery插件用于控制水平或垂直顺序的项目清单

      总的来说，jCarousel是一款强大且灵活的jQuery插件，它极大地简化了创建滚动列表的过程，同时也提供了丰富的定制功能，使得开发者可以打造出符合自己需求的个性化滚动效果。通过学习和掌握jCarousel，你可以为网站...

      Jcarousel jQuery 多风格图片滚动插件及示例

      内容索引:脚本资源,jQuery,图片滚动,jQuery插件　Jcarousel 是一款基于jQuery的多风格图片滚动插件，它可以控制成组的图片滚动，也可以设置滚动方向，横向或竖向，设置图片数量，两端带有多种风格的控制按钮。...

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