总结广告轮播方式（二.Bootstrap）

最新推荐文章于 2020-07-23 11:44:48 发布

NewDaDa

最新推荐文章于 2020-07-23 11:44:48 发布

阅读量544

点赞数

分类专栏： js 文章标签：广告轮播

本文链接：https://blog.csdn.net/NewDaDa/article/details/59085583

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

2.Bootstrap中的广告轮播

Bootstrap 插件全部依赖 jQuery!!!!!!
代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>广告轮播Boot框架</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <style>
        .carousel-indicators li{
            border:1px solid #000;
        }
        .carousel-indicators li.active{
            background-color: #000;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="carousel slide" data-ride="carousel" data-interval="2000" id="my_ad">
        <div class="carousel-inner">
            <div class="item active">
                <img src="imgs/banner_01.jpg">
            </div>
            <div class="item">
                <img src="imgs/banner_02.jpg">
            </div>
            <div class="item">
                <img src="imgs/banner_03.jpg">
            </div>
            <div class="item">
                <img src="imgs/banner_04.jpg">
            </div>
        </div>

        <!--添加上一张，下一张按钮-->
        <a href="#my_ad" data-slide="prev" class="carousel-control left">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a href="#my_ad" data-slide="next" class="carousel-control right">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
        <!--添加序号指示器-->
        <ul class="carousel-indicators">
            <li data-slide-to="0" class="active" data-target="#my_ad"></li>
            <li data-slide-to="1" data-target="#my_ad"></li>
            <li data-slide-to="2" data-target="#my_ad"></li>
            <li data-slide-to="3" data-target="#my_ad"></li>
        </ul>
    </div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
<script>
    //    bootlint是检查html/css错误
    (function () {
        var s = document.createElement("script");
        s.onload = function () {
            bootlint.showLintReportForCurrentDocument([]);
        };
        s.src = "js/bootlint.js";
        document.body.appendChild(s)
    })();
</script>
</body>
</html>

显示效果：
这里写图片描述

总结：

1.主要利用了Bootstrap提供的carousel插件，实现轮播的主要代码：data-ride=”carousel”;
2.Bootstrap提供主要几个效果：
- (1).添加活动效果：class=”slide”;
- (2).设置轮播效果：data-interval=”2000”;(单位毫秒)；
- (3).添加翻页效果(利用a标签)：href=”#关联轮播容器id”，
data-slide=”prev/next”, class=”carousel-control left/right”
在a标签中添加文字图标span
-(4).添加小圆饼：无序列表ul
ul上：class=”carousel-indicators”
li上：data-slide-to=”序号，从0开始” data-target=”#关联轮播容器id” class=”active”(默认第一张才有)
-(5).添加说明文字：直接将说明文字容器加在图片的后面

<div class="carousel-caption">
    <p>文字</p>
</div>

缺点：

很多样式需要自己去定制，修改Bootstrap的底层源代码；
class太多，记忆比较繁琐；

解决：

Bootstrap配合AngularJS

NewDaDa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
总结广告轮播方式（二.Bootstrap）

2.Bootstrap中的广告轮播Bootstrap 插件全部依赖 jQuery!!!!!! 代码：<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo
复制链接

扫一扫