jQuery cxSlide 焦点图轮换

使用方法

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

复制