Bootstrap 图片轮播

来源：互联网发布：淘宝达人贴怎么写编辑：程序博客网时间：2024/04/30 17:01
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Bootstrap 图片轮播</title>    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><!--width 为定义轮播界面的宽度，一般和轮播图片的宽度一致--><div id="yCarousel" class="carousel slide" style="width: 228px">    <!-- 轮播（Carousel）指标 -->    <ol class="carousel-indicators" >        <li data-target="#yCarousel" data-slide-to="0" class="active"></li>        <li data-target="#yCarousel" data-slide-to="1"></li>        <li data-target="#yCarousel" data-slide-to="2"></li>    </ol>    <!-- 轮播（Carousel）项目 在src中放入自己需要轮播的图片地址-->    <div class="carousel-inner">        <div class="item active" >            <img src="images/addre.jpg" alt="First slide">        </div>        <div class="item">            <img src="images/addre.jpg" alt="Second slide">        </div>        <div class="item">            <img src="images/addre.jpg" alt="Third slide">        </div>    </div></div></body></html>
0 0