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

最新推荐文章于 2023-10-22 20:57:58 发布

SSSkyCong

最新推荐文章于 2023-10-22 20:57:58 发布

阅读量807

点赞数 1

分类专栏： Js H5 学习-总结-转载

本文链接：https://blog.csdn.net/qlwangcong518/article/details/86064715

版权

学习-总结-转载同时被 3 个专栏收录

136 篇文章 0 订阅

订阅专栏

127 篇文章 2 订阅

订阅专栏

111 篇文章 1 订阅

订阅专栏

描述：

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

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

效果：

代码：

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

SSSkyCong

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS中BootStrap效果的运用——轮播图实现

描述：JS中BootStrap效果的运用——轮播图主要是引用文件，教程https://blog.csdn.net/qlwangcong518/article/details/86032763效果：代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"...
复制链接

扫一扫