Bootstrap之轮播图

最新推荐文章于 2024-01-15 19:39:34 发布

_Seaton

最新推荐文章于 2024-01-15 19:39:34 发布

阅读量3k

点赞数 2

本文链接：https://blog.csdn.net/yy228313/article/details/50744843

版权

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>轮播图-bootstrap</title>
    <script src="../../Scripts/jquery-2.2.0.js" type="text/javascript"></script>
    <script src="3.3.6/bootstrap.min.js" type="text/javascript"></script>
    <link href="3.3.6/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <!-- carousel-轮播、slide-滑动 -->
    <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标(indicators) -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- 轮播图-->
        <div class="carousel-inner">
            <div class="item active">
                <img src="upload/slide1.png" />
            </div>
            <div class="item">
                <img src="upload/slide2.png" />
            </div>
            <div class="item">
                <img src="upload/slide3.png" />
            </div>
        </div>

        <!-- 轮播导航，即左右按钮 -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>

    </div>
</body>
</html>

上面代码是根据官网的例子所写的。（http://caibaojian.com/bootstrap/javascript.html#carousel）

核心代码有以下三个部分组成：

轮播指标-即图片的中下部分的小圆点，一般用来选择图片。

轮播图-需要轮播的图片。

轮播导航-左右按钮。

这三部分都必须中一个div中。

同时一个轮播图对应着一个轮播指标。

效果图

每个版本的boostrap的轮播图都不一致，甚至有些无法显示轮播指标。

上图是3.3.6版本的。下面请看其他版本的效果图。

下图为 2.3.2版本的效果图。

最为夸张的是2.2.2版本的，三个可爱的小圆点直接变成了123。

3 优化

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>轮播图-bootstrap</title>
    <script src="../../Scripts/jquery-2.2.0.js" type="text/javascript"></script>
    <link href="3.3.5/bootstrap.css" rel="stylesheet" type="text/css" />
    <script src="3.3.5/bootstrap.js" type="text/javascript"></script>
</head>
<body>
    <div class="col-md-8 col-md-offset-2"><!-- 优化1：居中 -->
        <h1>优化</h1>
        <!-- carousel-轮播、slide-滑动 -->
        <div id="myCarousel" class="carousel slide">
            <!-- 轮播（Carousel）指标(indicators) -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>

            <!-- 轮播项目-->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="upload/slide1.png" />
                </div>
                <div class="item">
                    <img src="upload/slide2.png" />
                </div>
                <div class="item">
                    <img src="upload/slide3.png" />
                </div>
            </div>

            <!-- 轮播导航，即左右按钮 --><!-- 优化2：使用Glyphicons 字体图标代替‹› -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            </a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            </a>
        </div>
    </div>
</body>
</html>

效果图：