使用Bootstrap制作简易的轮播

最新推荐文章于 2020-10-29 06:00:00 发布

明扬.

最新推荐文章于 2020-10-29 06:00:00 发布

阅读量367

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_37986384/article/details/82623546

版权

前端专栏收录该内容

10 篇文章

订阅专栏

本文将指导你如何利用Bootstrap框架创建一个简单的轮播效果。通过学习，你将掌握如何设置轮播图片、添加控制按钮以及实现自动切换等功能，为网站增添动态视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>使用bootstrap制作简易的轮播</title>
  
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <h1 class="page-header">轮播图</h1>
        <!--Carousel：只有一个相对定位标记-->
        <div class="carousel slide" id="slidershow" data-ride="carousel">
           <!-- Carousel-indicators：圆圈部分样式，都是绝对定位，每个li设置为行内块元素，用text-indent：-999来隐藏字体-->
            <ol class="carousel-indicators">
                <li class="active" data-target="#slidershow" data-slide-to="0"></li>
                <li data-target="#slidershow" data-slide-to="1"></li>
                <li data-target="#slidershow" data-slide-to="2"></li>
                <li data-target="#slidershow" data-slide-to="3"></li>
            </ol>
           <!-- Carousel-inner：放轮播图片的地方，旋转图片列表区域，其中每项有item来修饰-->
            <div class="carousel-inner"
                <div class="item active">
                    <img src="imge/psb%20(4).jpg" style="width:100%" />
                   <!-- carousel-caption：图片的标题-->
                    <div class="carousel-caption">
                        <h4>标题1</h4>
                        <p>hello</p>
                    </div>
                </div>
                <div class="item">
                    <img src="imge/psb%20(4).jpg" style="width:100%" />
                    <div class="carousel-caption">
                        <h4>标题1</h4>
                        <p>hello</p>
                    </div>
                </div>
                <div class="item">
                    <img src="imge/psb%20(4).jpg" style="width:100%" />
                    <div class="carousel-caption">
                        <h4>标题1</h4>
                        <p>hello</p>
                    </div>
                </div>
                <div class="item">
                    <img src="imge/psb%20(4).jpg" style="width:100%" />
                    <div class="carousel-caption">
                        <h4>标题1</h4>
                        <p>hello</p>
                    </div>
                </div>
                <div class="item">
                    <img src="imge/psb%20(4).jpg" style="width:100%" />
                    <div class="carousel-caption">
                        <h4>标题1</h4>
                        <p>hello</p>
                    </div>
                </div>
            </div>

            <a href="#slidershow" data-slide="prev" class="left carousel-control" role="button">
                <span class="glyphicon glyphicon-chrvron-left">

                </span>
            </a>
            <a href="#slidershow" data-slide="prev" class="right carousel-control" role="button">
                <span class="glyphicon glyphicon-chrvron-right">

                </span>
            </a>

        </div>
    </div>


    
 
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>