bootstrap中的carosel
来源:互联网 发布:全球经济数据网站 汇通 编辑:程序博客网 时间:2024/06/14 20:00
实验代码:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <link rel="stylesheet" href="./public/bootstrap/css/bootstrap.css">
- <script type="text/javascript" src="public/bootstrap/js/jquery.js"></script>
- <script type="text/javascript" src="public/bootstrap/js/bootstrap.min.js"></script>
- <script type="text/javascript" src="public/bootstrap/js/carouse.js"></script>
- <title>无标题文档</title>
- </head>
- <body>
- <div class="carousel slide" id="main" style="width:500px; margin:200px">
- <ol class="carousel-indicators">
- <li data-target="#main" data-slide-to="0" class="active"></li>
- <li data-target="#main" data-slide-to="1"></li>
- <li data-target="#main" data-slide-to="2"></li>
- </ol>
- <div class="carousel-inner">
- <div class="active item">
- <img src="images/000 (2).jpg" style="width:100%;" />
- <div class="carousel-caption">
- <h4>第1张</h4>
- <p>这是第1张图</p>
- </div>
- </div>
- <div class="item">
- <img src="images/2.jpg" style="width:100%;" />
- <div class="carousel-caption">
- <h4>第2张</h4>
- <p>这是第2张图</p>
- </div>
- </div>
- <div class="item">
- <img src="images/6 (31).jpg" style="width:100%;" />
- <div class="carousel-caption">
- <h4>第3张</h4>
- <p>这是第3张图</p>
- </div>
- </div>
- </div>
- <a class="carousel-control left" href="#main" data-slide="prev">‹</a>
- <a class="carousel-control right" href="#main" data-slide="next">›</a>
- </div>
- <script>
- $('.carousel').carousel({
- interval: 2000
- })
- $('.carousel').carousel()
- </script>
- </body>
- </html>
效果图:
- bootstrap中的carosel
- bootstrap中的carosel
- bootstrap中的button groups
- bootstrap 中的 button dropdowns
- bootstrap中的badges
- bootstrap中的thumbnails
- bootstrap中的alerts
- bootstrap中的alerts
- bootstrap中的thumbnails
- bootstrap中的badges
- bootstrap 中的 button dropdowns
- bootstrap中的button groups
- bootstrap中的 progress bar
- bootstrap中的modals
- bootstrap中的dropdown
- bootstrap中的 progress bar
- bootstrap中的tooltip
- bootstrap中的popovers
- bootstrap中的typeahead
- 为控件添加自定义附加属性
- C++模板学习
- 图片和byte[]互转
- AS3中通过单击不同按钮进行交换元件出现问题解决办法
- bootstrap中的carosel
- 界面布局动态调整
- php中global与$GLOBALS的用法及区别
- 把内存当硬盘使,让你的linux程序运转如飞(在linux下用firefox在线写csdn的blog再也不卡了)
- j2ee5.0开发中jstl标签失效
- bootstrap中的accordion
- Notepad++使用技巧
- hdu 1711
- Wireshark基本介绍和学习TCP三次握手(转)