web 前端（轮番插件）

时间：2023-03-09 13:09:00
web 前端（轮番插件） 
<!DOCTYPE html>

<html  lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

    <title>轮番</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">

</head>

<body>

<div id="myCarousel" class="carousel slide">

    <!-- 轮播（Carousel）指标 -->

    <ol class="carousel-indicators">

        <li data-target="#myCarousel" data-slide-to="" data-ride="carousel" class="active"></li>

        <li data-target="#myCarousel" data-slide-to=""></li>

        <li data-target="#myCarousel" data-slide-to=""></li>

    </ol>

    <!-- 轮播（Carousel）项目 -->

    <div class="carousel-inner">

        <div class="item active" style="background:#223240">

            <img src="img/slide1.png" alt="第一张">

        </div>

        <div class="item" style="background:#F5E4DC;">

            <img src="img/slide2.png" alt="第二张">

        </div>

        <div class="item" style="background:#DE2A2D;">

            <img src="img/slide3.png" alt="第三张">

        </div>

    </div>

    <!-- 轮播（Carousel）导航 -->

    <a class="carousel-control left" href="#myCarousel" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left"></span>

    </a>

    <a class="carousel-control right" href="#myCarousel" data-slide="next">

    <span class="glyphicon glyphicon-chevron-left"></span>

    </a>

</div>

<script src="js/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>

</body>

</html>

相关文章