bootstrap图片轮播

来源：互联网发布：单独的js文件怎么写编辑：程序博客网时间：2024/04/30 16:27
<!DOCTYPE html><html>这里写图片描述    <head>        <meta charset="utf-8" />        <title>bootstrap图片轮播</title>        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">        <script src="js/jquery-3.2.1.min.js"></script>        <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>        <style type="text/css">            .carousel-inner img {                width: 100%;                height: 100%;            }        </style>    </head>    <!--通过data属性可以很容易的控制轮播的定位。    data-ride="carousel":属性用来标记在页面加载之后即开始启动的轮播组件。    data-slide:可以接受控制播放位置的prev或next关键字。    通过data-slide-to传递以0开始的幻灯片下标。    data-interval="2000":幻灯片轮换的等待时间。    data-pause="hover":鼠标停留在幻灯片区域即暂停轮播，鼠标离开即启动轮播。    data-wrap="true":轮播是否持续循环。-->    <body>        <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>            </ul>            <!-- 轮播图片 -->            <div class="carousel-inner">                <div class="carousel-item active">                    <img src="img/img_fjords_wide.jpg">                    <div class="carousel-caption">                        <h3>第一张图片描述标题</h3>                        <p>描述文字!</p>                    </div>                </div>                <div class="carousel-item">                    <img src="img/img_nature_wide.jpg">                    <div class="carousel-caption">                        <h3>第二张图片描述标题</h3>                        <p>描述文字!</p>                    </div>                </div>                <div class="carousel-item">                    <img src="img/img_mountains_wide.jpg">                    <div class="carousel-caption">                        <h3>第三张图片描述标题</h3>                        <p>描述文字!</p>                    </div>                </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>    </body></html>
阅读全文
1 0