Bootstrap 轮播(Carousel)插件
轮播插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是非常灵活的。可是图像，内嵌框架，视频或者其它您想的放置任何内容的类型。
下面是一个简单的幻灯片，使用轮播(carousel)插件显示一个循环播放元素的通用组件，为了现实轮播，您只需要添加带有标签的代码即可。
实例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<script src="jQuery/jquery-2.1.4.js"></script>
<link rel="stylesheet"href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"style="padding:20px">
<div class="carousel slide"id="myCarousel">
<!--轮播(carousel)指针-->
<ol class="carousel-indicators">
<li data-target="#myCarousel"data-slide-to="0"class="active"></li>
<li data-target="#myCarousel"data-slide-to="1"></li>
<li data-target="#myCarousel"data-slide-to="2"></li>
</ol>
<!--轮播(carousel)项目-->
<div class="carousel-inner">
<div class="item active">
<img src="Images/slide1.png"alt="First slide" />
</div>
<div class="item">
<img src="Images/slide2.png"alt="Second slide" />
</div>
<div class="item">
<img src="Images/slide3.png" />
</div>
</div>
<!--轮播(Carousel)导航-->
<a href="#myCarousel"class="carousel-control left"data-slide="prev">‹</a>
<a href="#myCarousel"class="carousel-control right"data-slide="next">›</a>
</div>
</div>
</body>
</html>
最新文章
- python之路十九
- git remote 相关用法
- Jquery--防止冒泡
- 一个映射到mac风格按键的AHK脚本（替换虚拟机键盘映射）
- 编译direct show 的filter项目
- 用CALayer实现聚光灯效果
- Autofac in webapi2
- vue 单文件组件中样式加载
- GPRS骨干网逻辑结构
- Vue之v-for、v-show使用举例
- Debug 路漫漫-07
- 1.6 flask应用: 代码统计系统
- git操作常见错误处理
- map 的用法
- 调整Windows XP 输入法顺序
- java-权限修饰符的区别
- win7游戏窗口设置
- STM32下多串口用法
- JAVAEE——宜立方商城06：Redis安装、数据类型和持久化方案、Redis集群分析与搭建、实现缓存和同步
- Android 5.0 API新增和改进