jQuery cxSlide 焦点图轮换
cxSlide 是一个简单易用的焦点图展示插件,支持水平、纵向切换,透明过渡切换。
已支持 CSS 动画过渡切换。通过 CSS 动画切换,可以展示更多效果。
- 版本:
- jQuery v1.7+
- jQuery cxSlide v2.0.2
- 注意事项:
- 内部会自动创建切换按钮元素,也可在外部直接创建,若外部已创建,内部将跳过此步骤;
- 展示图片未超过 1 张时,会隐藏切换按钮元素。
在线实例
实例预览 基础示例
实例预览 CSS 动画
实例预览 API 接口
使用方法
载入 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"
参数说明
名称 | 默认值 | 说明 |
---|---|---|
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() | 下一页 |
jQuery cxSlide 焦点图轮换的更多相关文章
- jQuery.KinSlideshow焦点图轮换
兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件,功能很多 ,基本能满足你在网页上使用幻灯片(焦点图)效果. 演示网 ...
- 8款耀眼的jQuery/HTML5焦点图滑块插件
1.HTML5/CSS3超酷焦点图特效 带前后翻页按钮 今天要分享的这款HTML5/CSS3焦点图插件切换效果比较简单,但是外观和功能却十分强大.该CSS3焦点图在切换图片时,图片以淡入淡出的方式缩小 ...
- Jquery幻灯片焦点图插件
兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件,功能很多 ,基本能满足你在网页上使用幻灯片(焦点图)效果. 下载
- jQuery制作焦点图(轮播图)
焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- Jquery制作--焦点图淡出淡入
之前写了一个焦点图左右轮播的,感觉淡出淡入用得也比较多,就干脆一起放上来啦.这个容器用了百分比宽度,图片始终保持居中处理,定宽或者自适应宽度都是可以的. 兼容到IE6+以上浏览器,有淡出淡入速度和切换 ...
- Jquery制作--焦点图左右轮播
公司项目经常用到轮播焦点图,于是自己写了一个纯jq形式的横向轮播焦点图,可点击小圆点或者左右按钮进行切换,属于定宽类型.改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js ...
- 8种效果实例-jQuery anoSlide 焦点图轮播
anoslide是一款可调节效果至任意宽度大小,支持图文混合内容显示的图片轮播插件. 在线实例 单个 多个 动画延迟 自动播放 显示分页 显示标题 延迟加载 自适应高度 使用方法 <div cl ...
- jQuery实现焦点图[兼容ie7+]
HTML: <div class="freehand" id="freehand"> <h1>宠物手绘</h1> <d ...
- jQuery悬浮焦点图宽屏
在线演示 本地下载
随机推荐
- java集合框架之Set
Set集合 元素不可以重复,是无序. 方法与list相同 HashSet:不保证set的迭代顺序,不同步,内部数据结构是哈希表 如果存自定义对象则需要覆盖equals和hashCode方法 先比较ha ...
- photoshop学习目录
前面的话 前端工程师最基本的工作是切图.photoshop用的6不6,对于工作效率有很大的影响.小火柴将前端工程师需要掌握的photoshop的知识和技能进行了梳理和归纳,总结成以下目录 目录 前端工 ...
- 深入理解CSS溢出overflow
× 目录 [1]定义 [2]属性 [3]失效[4]应用 前面的话 当一个元素固定为某个特定大小,但内容在元素中放不下.此时就可以利用overflow属性来控制这种情况 定义 overflow溢出 值: ...
- Hadoop阅读笔记(七)——代理模式
关于Hadoop已经小记了六篇,<Hadoop实战>也已经翻完7章.仔细想想,这么好的一个框架,不能只是流于应用层面,跑跑数据排序.单表链接等,想得其精髓,还需深入内部. 按照<Ha ...
- Codrops 教程:基于 CSS3 的精美模态窗口效果
Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...
- Windows Azure Platform Introduction (11) 了解Org ID、Windows Azure订阅、账户
<Windows Azure Platform 系列文章目录> 了解和掌握Windows Azure相关的基础知识是非常重要的. 问题1:什么叫做Org ID Org ID是Azure C ...
- java中String的相等比较
首先贴出测试用例: package test; import org.junit.Test; /** * Created by Administrator on 2015/9/16. * */ pub ...
- SwiftLint——Swift代码检查及自动格式化工具
某软不给力,正在做的UWP项目停工了.官方说法是要等到RS2发布新的VOIP架构,再看看是不是给某软面子.虽然Beta用户中发出了几点愤怒的声音,但是木有用.有用的只能是某软的Skype for bu ...
- oracle 表被锁了解决方案
使用下面的语句来查询被锁定的表: SELECT /*+ rule */ lpad(' ',decode(l.xidusn ,0,3,0))||l.oracle_username User_name, ...
- Emit学习(4) - Dapper解析之数据对象映射(一)
感觉好久没有写博客了, 这几天有点小忙, 接下来会更忙, 索性就先写一篇吧. 后面估计会有更长的一段时间不会更新博客了. 废话不多说, 先上菜. 一.示例 1. 先建类, 类的名称与读取的表名并没有什 ...