cbpContentSlider滑动切换对应内容

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

cbpContentSlider导航菜单nav和对应的ul li内容

<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>

引入并调用cbpContentSlider.js插件

<script src="js/modernizr.custom.js"></script>
<script src="js/jquery.cbpContentSlider.min.js"></script>

$('#cbp-contentslider').cbpContentSlider();

cbpContentSlider.jsAPI参数