其他分享
首页 > 其他分享> > 2020-2-27今日总结——轮播台

2020-2-27今日总结——轮播台

作者:互联网

  Bootstrapd的使用

1.轮播图   类名class="carousel"

carousel-inner,专门放随着页面滚动而滚动的内容。

div class="carousel" data-ride="carousel",就是用来启动Bs轮播台。

<div class="carousel slide" data-ride="carousel" data-interval="2500" data-pause="none">

  

data-interval="2500" ,2.5s一张图进行轮播。

data-pause="none",不暂停一直播放。(设置为click,一点击就会停)

<div class="item">
                <img src="img/33.jpg">
                <div class="carousel-caption">
                    <h5>五名有名-3</h5>
                    <span>Lorem ipsum dolor sit amet elit.</span>
                </div>
            </div>

  

carousel-caption,轮播广告的标题字,绝对定位,居中考下显示。

<!--不随广告而滚动的内容:轮播控件-->
        <a data-slide="prev" class="carousel-control left" href="#ad5">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a data-slide="next" class="carousel-control right" href="#ad5">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>

因为按钮不随图片滚动,所以就不要放在carousel-inner中。

故而独立放在carousel slide中。

通过,a标签中的href="#ad5"来捆绑区域,否则Bs也不知道要控制哪个轮播区域。

<span class="glyphicon glyphicon-chevron-left">,用图标字体显示上一张“<”。

<span class="glyphicon glyphicon-chevron-right">,用图标字体显示下一张“>”。

单独这两个图标样式: <ignore_js_op> ,有点小丑~

通过在<a class="carousel-control left(right)">,来修改样式:

<!--不随广告而滚动的内容:序号指示器-->
        <ul class="carousel-indicators">
            <li data-target="#ad6" data-slide-to="0" class="active"></li>
            <li data-target="#ad6" data-slide-to="1"></li>
            <li data-target="#ad6" data-slide-to="2"></li>
            <li data-target="#ad6" data-slide-to="3"></li>
        </ul>

 

carousel-indicators,用来设置一个一个直观“捆绑点”,单击即可切换,随着轮播滚动而滚动。

data-target="#ad5",设置捆绑id,这样才能将捆绑点和轮播图片连接上。

data-slide-to,拓展属性来捆绑图像顺序,这样鼠标单击才能切换。

总代码:

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta neme="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>LunboTai</title>
    <link rel="stylesheet" href="css/bootstrap.css">

    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <div id="ad5" class="carousel slide" data-ride="carousel" data-interval="3000" >
        <!--轮播广告的内部内容-->
        <div class="carousel-inner">
            <div class="item active">
                <img src="img/11.jpg">
                <div class="carousel-caption">
                    <h5>避暑蓝天</h5>
                    <span>lorem ipsum dolor sit amer elit.</span>
                </div>
            </div>
            <div class="item">
                <img src="img/22.jpg">
                <div class="carousel-caption">
                    <h5>海内存知己-2</h5>
                    <span>Lorem ipsum dolor sit amet elit.</span>
                </div>
            </div>
            <div class="item">
                <img src="img/33.jpg">
                <div class="carousel-caption">
                    <h5>五名有名-3</h5>
                    <span>Lorem ipsum dolor sit amet elit.</span>
                </div>
            </div>
            <div class="item">
                <img src="img/44.jpg">
                <div class="carousel-caption">
                    <h5>少言多思-4</h5>
                    <span>Lorem ipsum dolor sit amet elit.</span>
                </div>
            </div>
        </div>
        <!--不随广告而滚动的内容,轮播控件-->
        <a data-slide="prev" class="carousel-control left" href="#ad5">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a data-slide="next" class="carousel-control right" href="#ad5">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>

        <!--不随广告而滚动的内容:序号指示器-->
        <ul class="carousel-indicators">
            <li data-target="#ad5" data-slide-to="0" class="active"></li>
            <li data-target="#ad5" data-slide-to="1" ></li>
            <li data-target="#ad5" data-slide-to="2" ></li>
            <li data-target="#ad5" data-slide-to="3" ></li>
        </ul>
    </div>

</div>

    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.js"></script>
</body>
</html>

 

标签:ipsum,27,轮播,sit,elit,2020,carousel,data
来源: https://www.cnblogs.com/joker-18/p/12372945.html