• 目录

轮播Carousel

阅读量: 238 编辑

轮播Carousel

一、Carousel介绍

  • 轮播(carousel)是一种动态切换内容的一种形式,很多网站都有这个功能;

  • 可以节省空间,效果也非常出彩

  • class="carousel slide"

  • class="carousel-inner"

  • class="carousel-indicators"

  • class="carousel-control"

  • js调用:$('.carousel').carousel({interval: 1000}) // jQuery的知识,后面系类课程会讲,1000是毫秒,也就是1秒

二、代码实战

代码的详细解读,可以参考视频教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="./res/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="./res/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="./res/bootstrap.min.js"></script>
</head>
<body style="padding: 50px;">
    <h1>轮播Carousel</h1>

    <div id="myCard" class="carousel slide" style="width:60%">

        <!--轮播指示-->
        <ol class="carousel-indicators">
            <li data-target="#myCard" data-slide-to="0" ></li>
            <li data-target="#myCard" data-slide-to="1" class="active"></li>
            <li data-target="#myCard" data-slide-to="2"></li>
        </ol>

        <!--轮播图片区-->
        <div class="carousel-inner">
            <div class="item">
                <img src="./images/1.jpg" style="width: 100%">
            </div>
            <div class="item active">
                <img src="./images/2.jpg" style="width: 100%">
            </div>
            <div class="item">
                <img src="./images/3.jpg" style="width: 100%">
            </div>
        </div>

        <!--轮播控制区-->
        <a class="left carousel-control" href="#myCard" role="button" data-slide="prev" >
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        </a>
        <a class="right carousel-control" href="#myCard" role="button" data-slide="next" >
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        </a>

    </div>

    <script type="text/javascript">
        $('#myCard').carousel({interval: 1000})
    </script>

</body>
</html>


  • 目录