css3轮播

css3轮播

<div id="demo" class="carousel slide" data-ride="carousel">
        <!-- 指示符 -->
        <ul class="carousel-indicators ">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
            <li data-target="#demo" data-slide-to="2"></li>
            <li data-target="#demo" data-slide-to="4"></li>
        </ul>

        <!-- 轮播图片 -->
        <div class="carousel-inner" style="margin-top: 0;">
            <div class="carousel-item active carousel-bg1">
                <img style="width: 100%;" src="./img/slide_01_640x340.jpg">
            </div>
            <div class="carousel-item carousel-bg2">
                <img style="width: 100%;" src="./img/slide_02_640x340.jpg">
            </div>
            <div class="carousel-item carousel-bg3">
                <img style="width: 100%;" src="./img/slide_03_640x340.jpg">
            </div>
            <div class="carousel-item carousel-bg4">
                <img style="width: 100%;" src="./img/slide_04_640x340.jpg">
            </div>
        </div>

        <!-- 左右切换按钮 -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>

    </div>

在响应式网页中轮播是经常用到的，而我们要做的事套入Bootstrap中文件格式。

注意图片大小，在设定大小时通常用于百分比，同样在特定情况下设定宽高，响应式图片在于web中随着网页的不断变化而变化适用于手机等产品。