您的位置: 首页  >  文章  >  JS中BootStrap效果的运用——轮播图实现

JS中BootStrap效果的运用——轮播图实现

分类: 文章 • 2024-02-20 19:42:10

描述：

JS中BootStrap效果的运用——轮播图

主要是引用文件，教程https://blog.****.net/qlwangcong518/article/details/86032763

效果：

JS中BootStrap效果的运用——轮播图实现

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
    <style>
        .carousel-caption
        {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div class="carousel slide" id="myCarousel">
        <ul class="carousel-indicators">
            <li class="active" data-target="#myCarousel" data-slide-to="0"></li>
            <li data-target="#myCarousel"  data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
            <li data-target="#myCarousel" data-slide-to="4"></li>
        </ul>
        <div class="carousel-inner">
            <div class="item active">
                <img src="img/a.jpeg">
                <div class="carousel-caption">第一张图</div>
            </div>
            <div class="item">
                <img src="img/b.jpeg">
                <div class="carousel-caption">第二张图</div>
            </div>
            <div class="item">
                <img src="img/c.jpeg">
                <div class="carousel-caption">第三张图</div>
            </div>
            <div class="item">
                <img src="img/d.jpeg">
                <div class="carousel-caption">第四张图</div>
            </div>
            <div class="item">
                <img src="img/e.jpeg">
                <div class="carousel-caption">第五张图</div>
            </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" 
data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="right carousel-control" href="#myCarousel" 
data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
</body>
</html>

相关推荐