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"

参数说明

名称 默认值 说明

events	'click'	触发按钮事件的方式
type	'x'	过渡效果。可设置为："x", "y", "fade", "toggle", "anime"
start	0	开始展示序号，从 0 开始计算。
speed	800	切换速度 (ms)
time	5000	自动轮播间隔时间 (ms)
auto	true	是否自动轮播
hoverLock	true	鼠标移入移出锁定。鼠标进入区域内时停止自动轮播，离开后恢复自动轮播（仅在 auto 为 true 时有效）
btn	true	是否使用切换按钮
plus	false	是否使用 plus 按钮
minus	false	是否使用 minus 按钮

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. });

复制

         

名称 说明

play()	开始自动播放
stop()	停止自动播放
goto(value)	跳转到指定的页码
prev()	上一页
next()	下一页

 

---

下载