你的位置:首页 > Java教程

[Java教程]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> 添加 

画面离开时 <li> 添加 


参数说明

名称默认值说明
events'click'触发按钮事件的方式
type'x'过渡效果。可设置为:"x", "y", "fade", "toggle", "anime"
start0开始展示序号,从 0 开始计算。
speed800切换速度 (ms)
time5000自动轮播间隔时间 (ms)
autotrue是否自动轮播
hoverLocktrue鼠标移入移出锁定。鼠标进入区域内时停止自动轮播,离开后恢复自动轮播(仅在 auto 为 true 时有效)
btntrue是否使用切换按钮
plusfalse是否使用 plus 按钮
minusfalse是否使用 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()下一页

 


下载