jQuery cbpContentSlider 滑动切换
cbpContentSlider是一款选项卡插件,只要按照以下html结构就可以自动生成菜单切换内容特效。
在线实例
使用方法
<div id="cbp-contentslider" class="cbp-contentslider">
<ul>
<li id="slide1">
<h3 class="icon-wolf">狼</h3>
<div>
<div class="cbp-content">
<p>在一个狼群里,头狼老了,不能再出去捕猎了。有一天,他让两只年轻的狼独自去捕食猎物,没想到这两只年轻的狼当天就满载而归。头狼问它们是怎么捕获这么大的猎物的。</p>
<p>“我们在那些猎人回家的路上袭击了他们。”两只年轻的狼得意地回答。“他们一共多少人?”头狼问。“l0个。”两只年轻的狼很是骄傲。几天后,这个狼群中几只年轻的狼再次结队出去捕猎。头狼一直焦急地等待着他们回来,但他们一直不见踪影。第四天,一只遍体鳞伤、奄奄一息的狼终于艰难地爬了回来。“出什么事了?”头狼问。“我们袭击了猎人,其他的狼都被打死了………”“他们一共几个人?”头狼又问。“三个………”这只受伤的狼有气无力地回答。“上次是10个人,你们不是也得手了吗?”“可这三个人是朋友………”</p>
</div>
</div>
</li>
<li id="slide2">
<h3 class="icon-rabbit">兔子</h3>
<div>
<div class="cbp-content">
<p>一天,小熊和小兔去山上比赛搬石头小熊对小兔说:“我年年举重比赛都得冠军,谁也比不过我。”比赛开始了,小熊走过去咬着牙,咧着嘴,用尽全身力气,使劲抱住石头往上搬。你看它手臂上的肌肉一块块暴起,一条条青筋清晰可见,汗水像下雨一样滴滴答答往下掉,可那块大石头像生了根似的,纹丝不动。</p>
<p>小兔想:靠蛮力搬起石头是不行的,要想办法才可以搬得动这块大石头。小兔想起和小伙伴们玩跷跷板的场景,这时它的脑海里冒出来了一个好主意。它先找来一根又粗又长的木棒,然后找来一块石头,先把木棒插到大石头下面,再把小石头放到木棒下面,使劲一压,大石头滚了下去,“啪”的一声到了山脚下。小熊在一旁看着,下巴都快掉到地上了。小熊摸摸后脑勺,跑到小兔面前竖起大拇指说:“小兔你真厉害。”小兔说:“这没什么,我也只是观察了生活中的一些小细节,然后运用到这里罢了。”</p>
</div>
</div>
</li>
</ul>
<nav>
<a href="#slide1" class="icon-wolf"><span>狼</span></a>
<a href="#slide2" class="icon-rabbit"><span>兔子</span></a>
</nav>
</div>
$('#cbp-contentslider').cbpContentSlider();
参数详解
参数 | 描述 | 默认值 |
speed | 切换速度 毫秒 | 500 |
easing | 动画效果 | ease-in-out |
current | 当前选项卡索引 | 0 |
jQuery cbpContentSlider 滑动切换的更多相关文章
- 基于jQuery左右滑动切换特效 附源码
分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效. 效果图如下: 废话不多说,代码奉上! html代码: <div ...
- 基于jQuery左右滑动切换特效
分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 基于jQuery左右滑动切换图片代码
分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览 源码下载 实现的代码: <div class="v_ou ...
- jQuery鼠标滑动切换焦点图
在线演示 本地下载
- jQuery垂直滑动切换焦点图
在线演示 本地下载
- FlexSlider jQuery滑动切换插件 参数
demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...
- 使用jQuery实现点击左右滑动切换特效
使用jQuery实现点击左右滑动切换特效: HTML代码如下: <!--整体背景div--> <div class="warp"> <!--中间内容d ...
- FlexSlider是一个非常出色的jQuery滑动切换插件
FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看 ...
- jquery mobile左右滑动切换页面
jquery mobile左右滑动切换页面 $(function() {$("body").bind('swiperight', function() { $.mobile.ch ...
随机推荐
- Web Workers 的基本信息
问题:JavaScript 并行性 要将有趣的应用(例如从侧重服务器端的实施)移植到客户端 JavaScript,存在很多制约瓶颈.其中包括浏览器兼容性.静态类型.可访问性和性能.幸运的是,随着浏览器 ...
- OpenCascade Shape Representation in OpenSceneGraph
OpenCascade Shape Representation in OpenSceneGraph eryar@163.com 摘要Abstract:本文通过程序实例,将OpenCascade中的拓 ...
- 深入理解javascript作用域系列第四篇——块作用域
× 目录 [1]let [2]const [3]try 前面的话 尽管函数作用域是最常见的作用域单元,也是现行大多数javascript最普遍的设计方法,但其他类型的作用域单元也是存在的,并且通过使用 ...
- Cwinux源码解析(五)
Cwinux源码解析(五)
- 浅谈AngularJS中的$parse和$eval
AngularJS的初学者常常会对$parse和$eval两个内建服务感到有些困惑,今天我们就来说说AngularJS中的$parse和$eval. 总的来说,$parse和$eval都是作用于Ang ...
- Spring MVC 学习总结(七)——FreeMarker模板引擎与动态页面静态化
模板引擎可以让程序实现界面与数据分离,业务代码与逻辑代码的分离,这就提升了开发效率,良好的设计也使得代码复用变得更加容易.一般的模板引擎都包含一个模板解析器和一套标记语言,好的模板引擎有简洁的语法规则 ...
- 帮助你实现漂亮界面的14套免费的 HTML/CSS 源码
在网络上能找很多免费的 PSD 格式素材,但是很少有 HTML/CSS 界面组件下载.在这篇文章中,收集了14套免费的 HTML/CSS 界面源码分享给前端设计师和开发者们.这些组件包括按钮.滑块.表 ...
- webpack打包压缩工具的使用方法
具体使用方法参考来源http://www.cnblogs.com/Leo_wl/p/4793722.html 必须注意的地方: 一.webpack在nodejs环境下运行 二,每个目录下都必须有一个w ...
- NIO的一坑一惑小记
前言 不知不觉,已那么长时间没有更新东西了,说来真是汗颜啊.(主要是最近在技术上豁然开朗的感觉越来越少了-_-|||) 最近一直在学习Linux相关的东西.又一次接触到了I/O复用模型(select/ ...
- java中遇到过的String的一些特性
1.string对象是final的? String str="asdfdf"; str.replace("as",""); System.o ...