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 滑动切换的更多相关文章

  1. 基于jQuery左右滑动切换特效 附源码

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.   效果图如下:   废话不多说,代码奉上!   html代码: <div ...

  2. 基于jQuery左右滑动切换特效

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  3. 基于jQuery左右滑动切换图片代码

    分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="v_ou ...

  4. jQuery鼠标滑动切换焦点图

    在线演示 本地下载

  5. jQuery垂直滑动切换焦点图

    在线演示 本地下载

  6. FlexSlider jQuery滑动切换插件 参数

    demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...

  7. 使用jQuery实现点击左右滑动切换特效

    使用jQuery实现点击左右滑动切换特效: HTML代码如下: <!--整体背景div--> <div class="warp"> <!--中间内容d ...

  8. FlexSlider是一个非常出色的jQuery滑动切换插件

    FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看 ...

  9. jquery mobile左右滑动切换页面

    jquery mobile左右滑动切换页面 $(function() {$("body").bind('swiperight', function() {  $.mobile.ch ...

随机推荐

  1. socket编程的select模型

    在掌握了socket相关的一些函数后,套接字编程还是比较简单的,日常工作中碰到很多的问题就是客户端/服务器模型中,如何让服务端在同一时间高效的处理多个客户端的连接,我们的处理办法可能会是在服务端不停的 ...

  2. 再读GFS论文

    http://loopjump.com/gfs_paper_note/ 再读GFS的一些笔记.主要涉及GFS架构.Chunk大小选择的一些折中考量.元数据管理及锁.写数据流程.GFS一致性模型的理解. ...

  3. ASP.NET MVC 4.0中选择Windows 验证默认出错拒绝访问的原因和解决方案

    在VS 2012或者2013 中,根据模板创建一个ASP.NET MVC 4.0的应用程序,选择下面的模板 然后选择Intranet Application 不对源代码做任何修改,直接按下F5调试,会 ...

  4. 应用在tomcat下的四种部署方式(原创)

    1.XML主动部署 2.XML自动部署 3.WAR自动部署 4.DIR自动部署 主动部署就是在server中配置部署,自动部署不需要在server中部署. 自动部署要比主动部署多一些功能,例如监测特定 ...

  5. 网络通信之Socket与LocalSocket的比较

    Socket与LocalSocket都可以实现网络通信,两个有什么区别呢? LocalSocket其通信方式与Socket差不多,只是LocalSocket没有跨越网络边界. 于是,思考到一个问题:a ...

  6. Web 前端开发人员和设计师必读文章推荐【系列二十八】

    <Web 前端开发精华文章推荐>2014年第7期(总第28期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  7. 学习网页制作中如何在正确选取和使用 CSS 单位

    在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...

  8. [New Portal]Windows Azure Cloud Service (34) TechEd 2013 North America关于Azure的最新消息

    <Windows Azure Platform 系列文章目录> 话说TechEd 2013 US上个月3-6日在美国举办了,笔者的文章又有点姗姗来迟了. 需要了解相关视频的网友,请浏览ht ...

  9. SQL Server代理(10/12):使用代理账号运行作业

    SQL Server代理是所有实时数据库的核心.代理有很多不明显的用法,因此系统的知识,对于开发人员还是DBA都是有用的.这系列文章会通俗介绍它的很多用法. 在这一系列的上一篇,你查看了msdb库下用 ...

  10. C#开源

    商业协作和项目管理平台-TeamLab 网络视频会议软件-VMukti 驰骋工作流程引擎-ccflow [免费]正则表达式测试工具-Regex-Tester Windows-Phone-7-SDK E ...