实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
AخA
 
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
    <head>
4
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
        <title>cbpContentSlider以动画方式切换对应内容</title>
6
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
7
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
8
        <link rel="stylesheet" type="text/css" href="/api/jq/cbpContentSlider/css/component.css" />
9
        <script src="/api/jq/cbpContentSlider/js/modernizr.custom.js"></script>
10
    </head>
11
    <body>
12
        <div class="container">
13
            <div class="main">
14
                <div id="cbp-contentslider" class="cbp-contentslider">
15
                    <ul>
16
                        <li id="slide1">
17
                            <h3 class="icon-wolf">狼</h3>
18
                            <div>
19
                                <div class="cbp-content">
20
                                    <p>在一个狼群里，头狼老了，不能再出去捕猎了。有一天，他让两只年轻的狼独自去捕食猎物，没想到这两只年轻的狼当天就满载而归。头狼问它们是怎么捕获这么大的猎物的。</p>
21
                                    <p>“我们在那些猎人回家的路上袭击了他们。”两只年轻的狼得意地回答。“他们一共多少人?”头狼问。“l0个。”两只年轻的狼很是骄傲。几天后，这个狼群中几只年轻的狼再次结队出去捕猎。头狼一直焦急地等待着他们回来，但他们一直不见踪影。第四天，一只遍体鳞伤、奄奄一息的狼终于艰难地爬了回来。“出什么事了?”头狼问。“我们袭击了猎人，其他的狼都被打死了………”“他们一共几个人?”头狼又问。“三个………”这只受伤的狼有气无力地回答。“上次是10个人，你们不是也得手了吗?”“可这三个人是朋友………”</p>
22
                                </div>