web前端:jq,bootstrap

颛孙建业
2023-12-01

呼吸灯:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>

    <style>



        * {
            padding: 0;
            margin: 0;

        }
        img {
            display: block; /*转换块级元素*/
        }
        ul li {
            list-style: none;
        }
        /*清浮动的衣服*/
        .clearFix::after,.clearFix::before {
            content: '';
            display: block;
            line-height: 0;
            clear: both;

        }
        .Photo-frame {
            position: relative;
            width: 590px;
            height: 470px;
            border: 1px solid #ccc;
            margin: 100px auto;
            /*溢出隐藏*/
            overflow: hidden;
        }
        /*照片条*/
        /*.picBox {
            !*定位*!
            position: absolute;
            width: 2950px;
            height: 470px;

            top:0;

        }*/
        .picBox > li {
            position: absolute;
            left: 0;
            top:0;
            /*隐藏*/
            display: none;


        }
        .arrow {
            position: absolute;
            top:50%;
            margin-top: -20px;
            width: 24px;
            height: 40px;
            background-color: rgba(45,45,45,.3);
            color: #fff;
            line-height: 40px;
            text-align: center;
            font-size: 25px;
            cursor: pointer;/*鼠标小手样式*/

        }
        #next {
            right: 0;
        }
        #prev {
            left: 0;
        }
        .arrow:hover {
            background-color: rgba(45,45,45,.7);
        }
        /*小圆点*/
        .circles {
            position: absolute;
            bottom:20px;
            left: 50%;
            margin-left:-76px ;
            height: auto;

        }
        .circles span { /*10+1 =11*/
            display: inline-block;
            box-sizing: border-box;
            width: 14px;
            height: 14px;
            border: 3px solid rgba(255,255,255,.3);
            border-radius: 50%;
            margin-left: 10px;
            cursor: pointer;
            background-color: darkblue;


        }
        /*
        .circles span:hover {
            box-shadow: 0 0 10px 5px rgba(255,255,255,.7)  inset;
        }*/
        /*白色衣服 on  加大权重  把上面权重大的选择器 直接粘贴到下面衣服前  交集选择器不能有空格  */
        .circles span.on { /*10+10+1 = 21*/
            background-color: #fff;
        }


    </style>

</head>
<body>
<!--相框-->
<div class="Photo-frame">
    <!--照片条-->
    <ul class="picBox clearFix" style="left: 0">

        <li style="display: block">
            <a href="#"><img src="images/zhutu1.jpg" alt="">
            </a></li>
        <li><a href="#"><img src="images/zhutu3.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/zhutu4.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/zhutu5.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/zhutu6.jpg" alt=""></a></li>
    </ul>

    <!--指示  小圆圈-->
    <div class="circles">
        <span in="0" class="on"></span>
        <span in="1"></span>
        <span in="2"></span>
        <span in="3"></span>
        <span in="4"></span>
    </div>


    <!--箭头  next 右箭头-->
    <div class="arrow" id="next"> > </div>
    <!--左箭头-->
    <div class="arrow" id="prev"> < </div>
</div>
<script src="jquery-3.0.0.js"></script>
<script>


    $(function () {
        //点击右箭头 下一张淡入 其余兄弟淡出
        var index = 0; //当前播放图片的下标

        $('#next').click(function () {
            index++; //1 第二张
            if(index===5){
                index =  0;

            }
            //下一张图片淡入 其他兄弟淡出

            $('.picBox li').eq(index).fadeIn(1000).siblings().fadeOut(1000)
            buttonShow()




        });
        $('#prev').click(function () {
            index--; //1 第二张
            if(index===-1){
                index =  4;

            }
            $('.picBox li').eq(index).fadeIn(1000).siblings().fadeOut(1000)
            buttonShow()



        });

        //2:自动播放

        function play() {
             timer = setInterval(function () {
                //切换下一张
                $('#next').click()


            },2000)

        }
        play();
        /*相框  鼠标移入 移出事件  jquery 方法*/
        $('.Photo-frame').mouseover(function () {

            clearInterval(timer)

        })
        $('.Photo-frame').mouseout(function () {

           play()

        })
        //小圆点切换白色背景函数
        function buttonShow() {
            //排他 所有小圆点先全脱掉on的类样式  当前对应播放小圆点加上
           $('.circles span').removeClass('on');
            $('.circles span').eq(index).addClass('on')
        }
        //鼠标移入圆点切换相应图片 当前鼠标移入的小圆点对应的图片淡入 其他兄弟淡出
        $('.circles span').mouseover(function () {

            //小圆圈身上 in
            var imgIndex =   $(this).attr('in')
            $('.picBox li').eq(imgIndex).fadeIn(1000).siblings().fadeOut(1000)
            index =  imgIndex; //新旧替换
            buttonShow()
        })
    })
</script>
</body>
</html>

 

 

 

 

节点操作:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
</head>
<body>
<button>创建一个标签</button>
<button>删除元素</button>
<script src="jquery-3.0.0.js"></script>
<script>
    $(function () {

        //1:节点的创建  $('<div></div>')
        var $btn = $('button:first')
        $btn.click(function () {  /*异步*/

            console.log('safdsgf')
            var obj = $('<div></div>').html('我是div元素').css({width:'200px',height:'200px',

            backgroundColor:'red',margin:"0 auto"

            }).attr('class','box')
            //尾插内容  父子关系 内部插入
           /* $(document.body).append(obj)*/
           /* obj.appendTo($(document.body))*/
            console.log(obj)
            /*前插  prepend()  prependTo()*/
           /* obj.prependTo($(document.body))*/

            /*外部插入  兄弟关系  after()  before() */
            $btn.after(obj)
        })

        $('button:last').click(function () {


            //empty() 删除父元素内部内容   通通全删除
           /* $(document.body).empty()  不具备挑选功能*/
            $('.box').remove()  //remove()带父元素和内容全部删除
        })
    });
</script>
</body>
</html>

 

 

 

 

省市联动:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <style>
        form {
            margin: 100px auto;
            width: 400px;
        }
    </style>
</head>
<body>
<form action="">
    <!--省-->
    <select name="province" id="province">


    </select>
    <!--市-->
    <select name="city" id="city">

    </select>


</form>

<script src="jquery-3.0.0.js"></script>

<script>
    
    $(function () {
        //初始化  界面一加载 只显示一个省和这个省对应的一个市

        var provinces = ['北京','河南省','河北省','广东省']  //省
        var cities = [['朝阳区','海淀区','大兴区'],['洛阳市','开封市','郑州市'],['张家口市','石家庄市','保定市'],

            ['东莞市','珠海市','深圳市']   ];
        var $pro = $('#province')
        var $cities = $('#city')

        //用户点击省份 城市下拉列表 改变事件 change()

        $pro.change(function () {
            //显示对应的市
            $cities.empty();
            //被用户选中那个 :selected

           /* console.log($(this))*/ //省
            var index = $('#province option:selected ').attr('a');
            console.log(index)
            //循环城市数组 找到下标对应的元素 --->数组 遍历数组 + option 追加到第二个select里就可以
            for(var i =0;i<cities[index].length;i++){
                $cities.append( $('<option></option>').text(cities[index][i]))
            }
            //1:加载省的对应的市  获取下标
            /*for(var i = 0;i<cities.length;i++){
             $pro.append($('<option></option>').text(provinces[i]))
            }*/
        })
        //初始化函数  参数:无 返回值 无
        function init() {
            //省份加载一个数据 provinces[0]
            //市加载  cities[0][0] --->朝阳

             for(var i = 0;i<provinces.length;i++){
                 $('<option></option>').text(provinces[i]).attr('a',i).appendTo($pro)
             }
            $('<option></option>').text(cities[0][0]).appendTo($cities)
        }
        init();
    });
</script>
</body>
</html>

 

 

 

 

评论案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <style>
        .criticism {
            width: 600px;
            height: auto;
            border: 5px double skyblue;
            margin: 100px auto;
            box-sizing: border-box;
            padding: 40px;
        }
        .criticism ul li {
            line-height: 40px;
            border-bottom: 1px dashed #000;
            list-style: none;
        }
        .criticism textarea {
            font-size: 16px;
        }

    </style>
</head>
<body>
<div class="criticism">
    <span>微博发布</span>
    <textarea name="" id="txt" cols="45" rows="16" style="resize: none"></textarea>
    <button id="publish">发布</button>

    <ul id="list">

    </ul>


</div>
<script src="jquery-3.0.0.js" type="text/javascript"></script>

<script>
    $(function () {
        //点击发布按钮  获取用户输入  判断合不合法 (空串)如果合法 追加到ul里面去  包裹li元素
        $('#publish').click(function () {

            if(!$.trim($('#txt').val())){ //$.trim(‘字符串’)去掉字符串起始和结尾的空格。
                //是个空串
                alert('请输入有效评论!')
                return false ;

            }else {
                var str  = $.trim($('#txt').val());
                $('#list').prepend($('<li></li>').text(str)) ;
                $('#txt').val(' ')  //点击之后将文本域置空
                return true ;

            }

        })


    });

</script>
</body>
</html>

 

 

 

 

弹幕:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">



        html, body {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            font-family: "微软雅黑";
            font-size: 62.5%;  /*100% 14px 62.5%  10px */

        }

        .boxDom {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;

        }

        .idDom {
            width: 100%;
            height: 100px;
            background: #666;
            position: fixed;
            bottom: 0px;

        }

        .content {
            display: inline-block;
            width: 430px;
            height: 40px;
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            margin: auto;

        }

        .title {
            display: inline;
            font-size: 4em;
            vertical-align: bottom;
            color: #fff;
        }

        .text {
            border: none;
            width: 300px;
            height: 30px;
            border-radius: 5px;
            font-size: 2.4em;
        }

        .btn {
            width: 60px;
            height: 30px;
            background: #f90000;
            border: none;
            color: #fff;
            font-size: 2.4em;
        }

        span {
            width: 300px;
            height: 40px;
            position: absolute;
            overflow: hidden;
            color: #000;
            font-size: 4em;
            line-height: 1.5em;
            cursor: pointer;
            /*不换行 强制一行显示*/
            white-space: nowrap;

        }
        #idDom span {
            position: absolute;
        }

    </style>
</head>

<body>
<!--span  评论 放在boxDom身上-->
<div class="boxDom" id="boxDom">
    <div class="idDom" id="idDom">
        <div class="content">
            <p class="title">吐槽:</p>
            <input type="text" class="text" id="text"/>
            <button type="button" class="btn" id="btn">发射</button>
        </div>
    </div>

</div>


<script src="jquery-3.0.0.js"></script>
<script>
$(function () {
    //文本框
    var $textBox = $('#text')
    var $btn = $('.btn')
    var $boxDom = $('#boxDom')
    //1:绑定点击事件
    $btn.click(function () {
        //获取文本内容
        var txt = $textBox.val()
        //随机颜色 颜色数组   随机高度 top 区间

        //随机高度 区间 50-450px
        var RanNum = Math.floor( Math.random()*400+50  )
        //随机颜色
        var ColorStr =  CreateColor();//产生随机颜色

         //动起来  动画函数  animate()
        $boxDom.append( $('<span></span>').text(txt)
            .css({'color':ColorStr,left:'1700px'})
            .css({top:RanNum+'px'})
            .animate({left:'-1000px'},5000,'linear',function () {
                       //动画结束 清除当前节点 span $(this) 当前左动画的元素
                $(this).remove() ;
            })
        )
        $textBox.val('')
      console.log($textBox[0])

    })
    //事件对象  e
    //文本框绑定一个键盘抬起 检测抬起的是enter 立即$btn.click()
      $textBox.keyup(function (e) {
         console.log(e.keyCode)
          if(e.keyCode === 13){ //enter 键的键码13
              $btn.click()
          }
      })
    //产生颜色

    function CreateColor() {
        var colorArr = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']

        var str = '#'
        for(var i =0;i<6;i++){
            var num = Math.ceil(Math.random()*15) //0 -15 4
            str+=colorArr[num]

        }
        return str ;
    }
});

</script>
</body>
</html>

 

 

 

 

bootstrap:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <!--meta 元标签 视口 viewport  移动端 视口 --》呈现网页  pC 浏览器直接呈现网页 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>

        mark {
            background-color: gold;
        }
        .table {
            /*width: 50%;
            margin: 0 auto;*/
        }
       tr td {
            text-align: center;
        }
    </style>
</head>
<body>
<!--基于jquery-->

<span class="h1">萨尔王分  积分惹我</span>
<p class="text-center">safbreg reg</p>
<p class="lead">awgfrehg</p>

You can use the mark tag to <mark>highlight</mark> text.

You can use the mark tag <abbr title="attribute">attr</abbr>


<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-condensed">
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>地址</th>

    </tr>
    <tr>
        <td>1001</td>
        <td>花花</td>
        <td>地球街38号</td>

    </tr>
    <tr>
        <td>1001</td>
        <td>花花</td>
        <td>地球街38号</td>

    </tr>
    <tr>
        <td>1001</td>
        <td>花花</td>
        <td>地球街38号</td>

    </tr>

</table>
</div>
<form>
    <div class="form-group">
        <label for="exampleInputEmail1">邮箱</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">密码</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> Check me out
        </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

<div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess2">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
    <label class="control-label" for="inputWarning2">Input with warning</label>
    <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
    <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
    <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError2">Input with error</label>
    <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
    <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
    <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
    <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>


<button type="button" class="btn btn-primary">(首选项)Primary</button>
<script src="jquery-3.0.0.js"></script>
<script src="bootstrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>

</body>
</html>

 

 

 

 

响应式图片:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <!--meta 元标签 视口 viewport  移动端 视口 --》呈现网页  pC 浏览器直接呈现网页 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>


        .box {
            width: 50%;
            height: 400px;
            border: 1px solid #ccc;
            margin: 100px auto;

        }

    </style>
</head>
<body>
<!--基于jquery-->

<div class="box">
    <img src="images/samll.jpg" alt="" class="img-responsive  center-block">
</div>


<script src="jquery-3.0.0.js"></script>
<script src="bootstrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>

</body>
</html>

 

 

 

 

模态框:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <!--meta 元标签 视口 viewport  移动端 视口 --》呈现网页  pC 浏览器直接呈现网页 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>


        form {
            padding: 20px;
        }


    </style>
</head>
<body>
<!--基于jquery-->

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    登录
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
                <div class="form-group">
                    <label for="exampleInputFile">File input</label>
                    <input type="file" id="exampleInputFile">
                    <p class="help-block">Example block-level help text here.</p>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> Check me out
                    </label>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

            </div>
        </div>
    </div>
</div>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

<script src="jquery-3.0.0.js"></script>
<script src="bootstrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>

    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })
</script>



</body>
</html>

 

 

 

 

轮播图:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <!--meta 元标签 视口 viewport  移动端 视口 --》呈现网页  pC 浏览器直接呈现网页 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>


        form {
            padding: 20px;
        }
        #carousel-example-generic {
            width: 100%;
            height: 400px;
            margin: 0 auto;

        }

        .carousel-inner .item img {
            width: 100%;
            height: 400px;
        }
        .navbar {
            min-height: 80px;
            margin-bottom: 0px;
           padding-top: 15px;
            padding-left: 50px;
        }
        .navbar-default {
            background-color: #202026;
            border-bottom: 1px solid #000;
        }
        .navbar-default .navbar-nav > li > a:hover {
            color: #fff;
        }

    </style>
</head>
<body>
<!--基于jquery-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" >
    <!-- Indicators 小圆圈-->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="images/zhutu1.jpg" alt="..." class="img-responsive">
            <div class="carousel-caption">
              第一张
            </div>
        </div>
        <div class="item">
            <img src="images/zhutu3.jpg" alt="..." class="img-responsive">
            <div class="carousel-caption">
                第二张
            </div>
        </div>
        <div class="item">
            <img src="images/zhutu4.jpg" alt="..." class="img-responsive">
            <div class="carousel-caption">
                第三张
            </div>
        </div>

    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<script src="jquery-3.0.0.js"></script>
<script src="bootstrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>



</body>
</html>

 

 

 

 

 

 类似资料: