Bootstrap图片轮播

来源：互联网发布：怎样打开网络授权编辑：程序博客网时间：2024/05/01 01:24

Bootstrap提供了carousel插件，实现图片轮播非常方便。

代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>   <style type="text/css">        img{           margin:0 auto;        }   </style></head><body>    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">  <!-- Indicators -->  <ol class="carousel-indicators">    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>    <li data-target="#carousel-example-generic" data-slide-to="1"></li>    <li data-target="#carousel-example-generic" data-slide-to="2"></li>  </ol>  <!-- Wrapper for slides -->  <div class="carousel-inner" role="listbox">    <div class="item active">      <img src="images/lunbo1.jpg" height="266" width="800" alt="...">      <div class="carousel-caption">        ...      </div>    </div>    <div class="item">      <img src="images/lunbo2.jpg" height="266" width="800" alt="...">      <div class="carousel-caption">        ...      </div>    </div>     <div class="item">      <img src="images/lunbo3.jpg" height="266" width="800" alt="...">      <div class="carousel-caption">        ...      </div>    </div>    ...  </div>  <!-- Controls -->  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>    <span class="sr-only">Previous</span>  </a>  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>    <span class="sr-only">Next</span>  </a></div></body></html>

效果

这里写图片描述

可选参数

data-ride=”carousel”：加上可以自动播放，不加点击后才会播放。
添加标题
标题写在 <div class="carousel-caption"></div>之间
例如：

<div class="carousel-caption">     <h3>果壳推书正式上线</h3>     <p>好书分享、经验交流</p></div>

官网：http://v3.bootcss.com/javascript/#carousel

2 0