bootstrap 轮播效果

来源：互联网发布：exe打包软件编辑：程序博客网时间：2024/06/08 10:36

先来看一下效果：

这里写图片描述

废话不多说，上代码：homepage.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=0.7, minimum-scale=0.5, maximum-scale=2, user-scalable=yes">  <link  href="bootstrap/css/bootstrap.min.css"  rel="stylesheet">  <script src="bootstrap/js/jquery-3.2.1.min.js"></script>  <script src="bootstrap/js/bootstrap.min.js"></script>  <title>Dreamera</title>  <style type="text/css">    #picture {        text-align: center;    }  </style>  </head>  <body>    <div class = "container">      <div class="row">        <!-- 左边的轮播图 -->        <div class="col-md-6">          <div class="carousel slide" id="carousel-231811" data-ride="carousel">            <ol class="carousel-indicators">              <li data-slide-to="0" data-target="#carousel-231811" class="active" ></li>              <li data-slide-to="1" data-target="#carousel-231811" ></li>              <li data-slide-to="2" data-target="#carousel-231811"></li>            </ol>                                    <div class="carousel-inner">              <div class="item active">                <center><img alt="" src="android.png" /></center>              </div>                                      <div class="item">                <center><img alt="" src="android2.png" /></center>              </div>                                      <div class="item">                <center><img alt="" src="android3.png" /></center>              </div>            </div>          </div>        </div>        <!-- 右边的二维码 -->        <div class="col-md-6">          <div id="picture" width="300px">            <h1><small>Android v1.0</small></h1>            <p>浏览器扫码</p>                                            <img src="QRCode.png" alt="..." class="img-rounded">                                    <h1><small>Android v1.0</small></h1>            <p>浏览器扫码</p>                                <img src="new_branch.png" alt="..." class="img-rounded">          </div>        </div>                                            </div>    </div>    <!-- 页脚 -->    <footer class="footer" style="text-align:center;">      <h1>        <small>        <span>&copy; Dreamera |</span>        <span>by 10405 |</span>        <a href="mailto:1040591521@qq.com" data-show-count="true" data-lang="en">            Contact Dreamera        </a>        </small>      </h1>    </footer>         </body></html>

bootstrap3.0中为我们提供了javascript插件，其中就包含轮播（carousel）
需要注意的是：在使用前，要引用jquery.js，并且要在bootstrap.min.js之前引用。

代码中用到的图片如下（可以ps其他的内容）：

这里写图片描述

阅读全文

0 0