jQuery cxSlide 焦点图轮换

cxSlide 是一个简单易用的焦点图展示插件，支持水平、纵向切换，透明过渡切换。

已支持 CSS 动画过渡切换。通过 CSS 动画切换，可以展示更多效果。

• 版本：
• jQuery v1.7+
• jQuery cxSlide v2.0.2
• 注意事项：
• 内部会自动创建切换按钮元素，也可在外部直接创建，若外部已创建，内部将跳过此步骤；
• 展示图片未超过 1 张时，会隐藏切换按钮元素。

• github地址

在线实例

实例预览 基础示例

实例预览 CSS 动画

实例预览 API 接口

使用方法

载入 JavaScript 文件

1. <script src="jquery.js"></script> 
2. <script src="jquery.cxslide.js"></script>

复制

CSS 样式结构

除必要属性设置外，其他样式均可自行设置。

1. /** 
2.  * cxSlide 基本样式 
3.  * width 和 height 根据需求设置 
4.  */ 
5. .cxslide{position:relative;width:600px;height:280px;} 
6. .cxslide .box{} 
7. .cxslide .list{} 
8. .cxslide .list li{} 
9. .cxslide .btn{} 
10. .cxslide .btn li{} 
11. .cxslide .btn li.selected{} 
12. .cxslide .minus{} 
13. .cxslide .plus{} 

复制

1. /* 横向过渡 type: 'x' */ 
2. .cxslide .box{overflow:hidden;width:600px;height:280px;} 
3. .cxslide .list{overflow:hidden;width:9999px;} 
4. .cxslide .list li{float:left;position:relative;width:600px;} 

复制

1. /* 纵向过渡 type: 'y' */ 
2. .cxslide .box{overflow:hidden;width:600px;height:280px;} 
3. .cxslide .list{overflow:hidden;height:9999px;} 

复制

1. /* 透明过渡 type: 'fade' */ 
2. .cxslide .box{overflow:hidden;position:relative;width:600px;height:280px;} 

复制

DOM 结构

1. <!-- 焦点图 --> 
2. <div id="element_id" class="cxslide"> 
3.   <div class="box"> 
4.     <ul class="list"> 
5.       <li></li> 
6.       <li></li> 
7.       ... 
8.       <li></li> 
9.     </ul> 
10.   </div> 
11.  
12.   <!-- 控制按钮会自动创建，可省略 --> 
13.   <ul class="btn"> 
14.     <li class="b_1">1</li> 
15.     <li class="b_2">2</li> 
16.     ... 
17.     <li class="b_n">n</li> 
18.   </ul> 
19.   <div class="plus"></div> 
20.   <div class="minus"></div> 
21. </div>

复制

调用方式

1. $(‘#element_id’).cxSlide();

复制

动画切换

画面进入时 <li> 添加 class="in"

画面离开时 <li> 添加 class="out"

参数说明

API 接口

1. var Api; 
2. $('#element_id').cxSlide(function(api){ 
3.   Api = api; 
4. }); 
5. // 或者作为第二个参数传入 
6. $('#element_id').cxSlide({ 
7.   minus: true, 
8.   plus: true 
9. }, function(api){ 
10.   Api = api; 
11. });

复制

下载