跑马灯之练习

原创 2019-02-19 21:41:42 322
摘要:<!doctype html><html><head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="../lib/dist/css/bootstrap.css">

    <title>Carousel / 轮播插件/跑马灯/旋转木马</title>

</head>

<body>

<!--1.创建轮播图的容器-->

<!--基类:carousel, 触发方式: data-ride="carousel"-->

<div id="slider" class="carousel slide" data-ride="carousel">

    <!--2.设置轮播图的播放顺序-->

    <ol >

        <li data-target="#slider" data-slide-to="0"></li>

        <li data-target="#slider" data-slide-to="1"></li>

        <li data-target="#slider" data-slide-to="2"></li>

    </ol>

    <!--3.设置轮播的图片-->

    <div>

        <!--每张图添加.item, 并设置第一张为当前激活状态.active-->

        <div class="item active">

            <img src="1.jpg" alt="">

            <div>国庆去哪玩?</div>

        </div>


        <div>

            <img src="2.jpg" alt="">

            <div>最新款的鞋子</div>

        </div>


        <div>

            <img src="3.jpg" alt="">

            <div>天猫促销中...</div>

        </div>

    </div>


    <!--4.设置轮播图的播放-->

    <!--data-slide="prev":点击后向前播放-->

    <a href="#slider" class="carousel-control left" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left"></span>

    </a>


    <a href="#slider" class="carousel-control right" data-slide="next">

        <span class="glyphicon glyphicon-chevron-right"></span>

    </a>

</div>



<script src="../lib/jquery.js"></script>

<script src="../lib/dist/js/bootstrap.js"></script>

</body>

</html>


批改老师:查无此人批改时间:2019-02-20 09:07:52
老师总结:完成的不错,<img src="1.jpg" alt=""> 里的 alt也加上文字,标准的html5,继续加油。

发布手记

热门词条