jQuery cxSlide 焦点图轮换

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

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

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

示例

  • 焦点图说明文字 111

  • 焦点图说明文字 222

  • 焦点图说明文字 333

  • 焦点图说明文字 444

  • 焦点图说明文字 555

使用方法

载入 JavaScript 文件

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

CSS 样式结构

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

/**
 * cxSlide 基本样式
 * width 和 height 根据需求设置
 */
.cxslide{position:relative;width:600px;height:280px;}
.cxslide .box{}
.cxslide .list{}
.cxslide .list li{}
.cxslide .btn{}
.cxslide .btn li{}
.cxslide .btn li.selected{}
.cxslide .minus{}
.cxslide .plus{}
/* 横向过渡 type: 'x' */
.cxslide .box{overflow:hidden;width:600px;height:280px;}
.cxslide .list{overflow:hidden;width:9999px;}
.cxslide .list li{float:left;position:relative;width:600px;}
/* 纵向过渡 type: 'y' */
.cxslide .box{overflow:hidden;width:600px;height:280px;}
.cxslide .list{overflow:hidden;height:9999px;}
/* 透明过渡 type: 'fade' */
.cxslide .box{overflow:hidden;position:relative;width:600px;height:280px;}

DOM 结构

<!-- 焦点图 -->
<div id="element_id" class="cxslide">
  <div class="box">
    <ul class="list">
      <li></li>
      <li></li>
      ...
      <li></li>
    </ul>
  </div>

  <!-- 控制按钮会自动创建,可省略 -->
  <ul class="btn">
    <li class="b_1">1</li>
    <li class="b_2">2</li>
    ...
    <li class="b_n">n</li>
  </ul>
  <div class="plus"></div>
  <div class="minus"></div>
</div>

调用方式

$('#element_id').cxSlide();

动画切换

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

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

可参考 动画 Demo

参数说明

名称 默认值 说明
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 接口

var Api;
$('#element_id').cxSlide(function(api){
  Api = api;
});
// 或者作为第二个参数传入
$('#element_id').cxSlide({
  minus: true,
  plus: true
}, function(api){
  Api = api;
});
名称 说明
play() 开始自动播放
stop() 停止自动播放
goto(value) 跳转到指定的页码
prev() 上一页
next() 下一页

相关信息

作者网站:
http://ciaoca.com
相关文档:
Github
中文文档
授权协议:
MIT