JQuery Jcarousel插件实现横向无缝图片滚动

移动开发
JQuery Jcarousel插件实现横向无缝图片滚动是本文要介绍的内容,主要是了解利用JQuery来实现滚动效果,具体内容的实现来看本文。

JQuery Jcarousel插件实现横向无缝图片滚动是本文要介绍的内容,主要是了解利用JQuery来实现滚动效果, jCarousel操作jquery图片产品展示插件可以用来展示产品图片jquery插件。

jCarousel是个非常好看又好用的内容滚动切换插件,可以实现按序水平或垂直方向的内容列表的切换。滚动切换的内容可以是静态的HTML内容,也可以是JS的对象列表,也可以是利用AJAX技术动态载入的内容。 

JQuery Jcarousel插件之横向无缝图片滚动

jcarousel 使用方法 使用此插件,需要在<head>标签内引入jQuery库,jCarousel源文件和CSS样式等:

  1. <script type="text/javascript" src="/path/to/jquery-1.2.1.pack.js"> 
  2. </script><script type="text/javascript" src="/path/to/lib/jquery.jcarousel.pack.js"> 
  3. </script><link rel="stylesheet" type="text/css" href="/path/to/lib/jquery.jcarousel.css"  /> 
  4. <link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css"  /> 
  5.  
  6. jCarousel在HTML文档中使用一个非常简单的HTML标记结构:   
  7. <ul id="mycarousel">    
  8. <!-- The content goes in here --> 
  9. </ul> 

jCarousel自动生成需要的HTML标记内容。class属性标明jCarousel使用的”name”名称的外观。应用jCarousel,需要在<head>标记内增加以下代码:

  1. <script type="text/javascript">jQuery(document).ready(function() {     
  2.  jQuery('#mycarousel').jcarousel({         
  3.  // Configuration goes here      
  4. })  
  5. ;  
  6. });  
  7. </script> 

jCarousel可以接受很多配置选项,在后面会详细说明。 jCarousel初始化成功后,生成的DOM结构如下所示:

  1. <div>    
  2. <div>     
  3.  <div disabled="disabled"> 
  4. </div>      
  5. <div> 
  6. </div>      
  7. <div>        
  8. <ul>          
  9. <li>First item</li>         
  10.  <li>Second item</li>        
  11. </ul>      
  12. </div>    
  13. </div> 
  14. </div> 

你可以发现自动生成了一些有class属性的元素。你可以自己定义这些对应的class的样式。注: "jcarousel-skin-name"外观class名称被自动从<ul>上变动到了顶层的<div>元素上。在<div>中的第一个<div>元素表示一个不可用的按钮,第二个<div>元素是一个可用的按钮。

不可用按钮有一个disabled属性(实际上对<div>元素没有影响,你可以照常使用按钮元素),额外的jcarousel-prev-disabled(或者jcarousel-next-disabled)表示样式。在列表中的<li>元素都有jcarousel-item-n的样式,通过n表示在列表中的位置。class的名称都可以复用,如<ul>表示一个水平的carousel。动态内容载入使用itemLoadCallback回调方法作为一个配置选项,你可以实现动态创建<li>元素。

  1. <script type="text/javascript"> 
  2. jQuery(document).ready(function() {  
  3.     jQuery('#mycarousel').jcarousel({         
  4.  itemLoadCallback: itemLoadCallbackFunction      
  5. });});  
  6. </script> 

itemLoadCallback是个JavaScript函数,当carousel载入了列表内容时被执行。使用时需要传递两个参数:载入列表的carousel实例对象和指示当前carousel状态的标记('init','prev'或者'next')。

  1. <script type="text/javascript"> 
  2. function itemLoadCallbackFunction(carousel, state){      
  3.   for (var i = carousel.first;   
  4.   i <= carousel.last; i++) {  
  5.         // Check if the item already exists         
  6.  if (!carousel.has(i)) {             
  7.     // Add the item             
  8.  carousel.add(i, "I'm item #" + i);          
  9. }     
  10. }};  
  11. </script> 

jCarousel包含一个方便的add()方法,用于创建对应编号的元素和元素中的innerHTML字符串内容。如果元素已经存在,它只是更新元素的innerHTML字符串。你可以使用carousel.first和carousel.last变量来访问第一个和最后一个可见元素的编号值。 配置选项 jCarousel接受以下选项来控制carousel的表现和行为。从属性、类型、默认值、描述。

  1. vertical bool false  

指定carousel是水平还是垂直方向滚动。

  1. start integer 1  

开始的元素编号。

  1. offset integer 1  

初始化后第一个可见的元素编号。

  1. size integer  

如果size属性没指定,则为<li>元素的个数 元素的个数。

  1. scroll integer 3  

每次滚动切换的元素数量。

  1. visible integer null  

如果设置此项,元素的宽度和高度值将根据区域的宽度和高度值来重新计算,以显示此数量的元素。

  1. animation mixed “fast”  

滚动效果的速度(“slow”或者”fast”),也可以是毫秒的整数(参见 jQuery Documentation)。如果设置为0,关闭切换效果。

  1. easing string null  

你想使用的缓冲效果的名字 (参见 jQuery Documentation).

  1. auto integer 0  

指定每隔多少秒自动滚动内容。如果设置为0(默认值)将关闭自动切换。

  1. wrap string null  

表示是否将第一个和最后一个元素实现连接效果。选项值可以是"first", "last"或者 "both"。如果设置为null,默认关闭连接效果。 你也可以设置"circular"选项实现循环效果。例子 Circular carousel 演示如何实现此效果。

  1. initCallback function null  

在初始化carousel后调用的JavaScript函数。包含两个参数:调用函数的carousel实例对象和carousel的初始化状态(init, reset 或者reload)。

  1. itemLoadCallback function null  

在carousel动态载入内容后调用的JavaScript函数。包含两个参数:调用函数的carousel实例对象和carousel的动作状态(prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。 itemLoadCallback: {  onBeforeAnimation: callback1,  onAfterAnimation: callback2}

  1. itemFirstInCallback function null  

当 某个元素成为carousel显示范围的第一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数:调用函数的实例对 象,<li>对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。 itemFirstInCallback: {  onBeforeAnimation: callback1,  onAfterAnimation: callback2}

  1. itemFirstOutCallback function null  

当某个元素不再是carousel显示范围的第一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数:调用函数的实例对象,<li>对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。 itemFirstOutCallback: {  onBeforeAnimation: callback1,  onAfterAnimation: callback2}

  1. itemLastInCallback function null  

当某个元素成为carousel显示范围的最后一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数:调用函数的实例对象,<li>对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。 itemLastInCallback: {  onBeforeAnimation: callback1,  onAfterAnimation: callback2}

  1. itemLastOutCallback function null  

当某个元素不再是carousel显示范围的最后一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数:调用函数的实例对象,<li>对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。 itemLastOutCallback: {  onBeforeAnimation: callback1,  onAfterAnimation: callback2}

  1. itemVisibleInCallback function null  

当某个元素成为carousel显示范围的某个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数:调用函数的实例对象,<li>对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。 itemVisibleInCallback: {  onBeforeAnimation: callback1,  onAfterAnimation: callback2}

  1. itemVisibleOutCallback function null  

当某个元素不再是carousel显示范围的某个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数:调用函数的实例对象,<li>对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。 itemVisibleOutCallback: {  onBeforeAnimation: callback1,  onAfterAnimation: callback2}

  1. buttonNextCallback function null  

当’next’按钮状态改变时调用的JavaScript函数。方法的返回值用于控制’next’按钮可用还是不可用。需要三个参数:调用函数的实例对象,按钮控件元素和该按钮是否可用的标记。

  1. buttonPrevCallback function null  

当’previous’按钮状态改变时调用的JavaScript函数。方法的返回值用于控制’previous’按钮可用还是不可用。需要三个参数:调用函数的实例对象,按钮控件元素和该按钮是否可用的标记。

  1. buttonNextHTML string <div></div>  

自动生成的next按钮的HTML标记。如果设置为空,不创建next按钮。

  1. buttonPrevHTML string <div></div>  

自动生成的prev按钮的HTML标记。如果设置为空,不创建prev按钮。

  1. buttonNextEvent string “click”  

指定触发next操作的事件名。

  1. buttonPrevEvent string “click”  

指定触发prev操作的事件名。

兼容性 jCarousel支持以下浏览器:

  1. Internet Explorer 6 (PC)   
  2. Internet Explorer 7 (PC)   
  3. FireFox 1.5.0.6 (PC/Mac/Linux)   
  4. Opera 9.01 (PC/Mac)   
  5. Safari 2.0.4 (Mac)   
  6. Safari 3.1.0 (PC)   
  7. Konqueror 3.4.0 (Linux)  

小结:JQuery Jcarousel插件之横向无缝图片滚动的内容介绍完了,希望通过本文的学习能对你有所帮助!

责任编辑:zhaolei 来源: 博客园
相关推荐

2011-09-02 10:03:40

jQuery滚动图片

2011-09-02 10:14:10

JQuery滚动Xslider

2021-06-18 10:12:09

JS代码前端

2012-08-10 09:46:53

jQuery

2012-05-07 09:53:10

jQuery

2012-05-10 14:02:46

jQuery

2011-07-22 13:30:52

JavaScript

2013-01-05 17:45:11

Android开发特效滚动屏幕

2013-12-02 15:07:57

jQuery插件

2015-05-07 10:02:47

jQuery jQuery 图片裁

2009-06-18 15:49:31

jQuery插件

2013-12-02 15:25:38

jQuery插件

2014-07-10 10:56:21

jQuery

2013-01-07 09:54:49

jQueryJavaScriptJS

2023-08-29 08:19:19

PicGo插件开发

2009-12-17 09:06:23

Visual Stud

2013-12-02 15:36:17

jQuery插件

2011-09-01 13:17:46

JQuery滚动

2015-08-03 10:42:56

微软EdgeChrome

2022-08-23 08:01:09

CSS前端
点赞
收藏

51CTO技术栈公众号