您的位置：首页 > Web前端 > BootStrap

bootstrap 实现简单轮播

2016-07-27 19:59 483 查看
<!DOCTYPE html>

<html>

<head lang="zh-cn">

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>bootstrap框架使用</title>

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

    <title></title>

    <style>

        #carousel-example-generic{

            margin: 30px auto;

          margin-left: 20%;

            width: 56%;

        }

    </style>

</head>

<body>

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

        <li data-target="#carousel-example-generic" data-slide-to="3"></li>

        <li data-target="#carousel-example-generic" data-slide-to="4"></li>

        <li data-target="#carousel-example-generic" data-slide-to="5"></li>

        <li data-target="#carousel-example-generic" data-slide-to="6"></li>

    </ol>

    <!-- Wrapper for slides -->

    <div class="carousel-inner" role="listbox">

        <div class="item active">

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

        </div>

        <div class="item">

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

        </div>

        <div class="item">

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

        </div>

        <div class="item">

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

        </div>

        <div class="item">

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

        </div>

        <div class="item">

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

        </div>

        <div class="item">

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

        </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="bootstrap/js/jquery-1.12.2.min.js"></script>

<script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航