bootstrap实现Carousel旋转木马(焦点图)
2024-09-05 03:07:09
引入bootstrap相关文件后,在html中写如下代码:
<div class="col-lg-9" >
<!-- Carousel====================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class=""></li>
<li class="active" data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item">
<img
src="http://gallery.myweb.com/547fcba0498e14c8d87c366e/547fd098498e14c8d87c369e.jpg"
alt="First slide">
<div class="container">
<div class="carousel-caption">
<%-- <h1>Example headline.</h1>
<p>
Note: If you're viewing this page via a
<code>file://</code>
URL, the "next" and "previous" Glyphicon buttons on the left
and right might not load/display properly due to web browser
security rules.
</p>
<p>
<a class="btn btn-lg btn-primary" href="#" role="button">Sign
up today</a>
</p> --%>
</div>
</div>
</div>
<div class="item active">
<img
src="http://gallery.myweb.com/547fd2e3498e14c8d87c374f/547fd2ed498e14c8d87c3750.jpg"
alt="Second slide">
<div class="container">
<!-- <div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Donec id elit non mi porta gravida at eget metus.
Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
<a class="btn btn-lg btn-primary" href="#" role="button">Learn
more</a>
</p>
</div> -->
</div>
</div>
<div class="item">
<img
src="http://gallery.myweb.com/547f32a4498e92e126340dfc/547f3839498e92e126340dfd.jpg"
alt="Third slide">
<div class="container">
<div class="carousel-caption">
<!-- <h1>希望h1> -->
<!-- <p>努力奔跑躲避追赶,而全力奔跑不是为了甩掉包袱,而是守护梦想!</p> -->
<!-- <p>
<a class="btn btn-lg btn-primary" href="#" role="button">围观</a>
</p> -->
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button"
data-slide="prev"> <span
class="glyphicon glyphicon-chevron-left"></span> <span
class="sr-only">Previous</span>
</a> <a class="right carousel-control" href="#myCarousel"
role="button" data-slide="next"> <span
class="glyphicon glyphicon-chevron-right"></span> <span
class="sr-only">Next</span>
</a>
</div>
<!-- /.carousel --> </div>
最新文章
- ZOJ-3820 Building Fire Stations 题解
- MySQL之运算符与函数、自定义函数
- 微信支付v3发布到iis时的证书问题
- Sql server使用Merge关键字做插入或更新操作
- 侯老师的话(Application Framework)
- UML关系总结
- 【Android Widget】FragmentTabHost
- 一次由SELinux引起的ssh公钥认证失败问题
- Weave Scope 多主机监控 - 每天5分钟玩转 Docker 容器技术(81)
- MFC中打开选择文件夹对话框,并将选中的文件夹地址显示在编辑框中
- Mac解决某些命令失效问题
- socket编程(C++)
- 自定义你的 Confluence 6 站点
- CentOS7 中文man(cman)配置方法
- How to Install Tomcat 8.0.27 on CentOS/RHEL and Ubuntu【转】
- shell 一
- (转)Qt中图片相对位置的引用
- SPI初识
- python爬取股票信息
- [网络]10M、100M、1000M网线的水晶头接法