幻灯片/轮播
全屏宽度的响应式jQuery幻灯片特效
PetitQ
这是一款效果非常酷的基于 Bootstrap3.x 和 HTML5 的响应式全屏宽度 jQuery 幻灯片特效。该 Bootstrap 幻灯片能自适应屏幕的宽度，使用 HTML5 的 data 属性来指定幻灯片所需的各种属性。使用简单，界面美观大方。该幻灯片特效使用的只是 jQuery、Boostrap3.x 和 HTML5，除此之外没有任何其它外部依赖。
使用方法:
使用这个 jQuery 幻灯片插件首先要引入 jQuery 和 Boostrap3 所需的文件。可以从 CDN 节点上调用 Bootstrap3 文件。
也想出现在这里？联系我们吧
<link type="text/css" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
HTML 结构:
该 jQuery 幻灯片的基本 HTML 结构如下：
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
......</ol>
<div class="carousel-inner">
......</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">...</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">...</a>
</div><!-- /.carousel -->
幻灯片图片部分的 HTML 结构如下：
<div class="carousel-inner">
<div class="item active"> <img src="3.jpg" style="width:100%" data-src="holder.js/900x500/auto/#7cbf00:#fff/text: " alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1> Headling 1 </h1>
<p> Description 1</p>
</div>
</div>
</div>
<div class="item"> <img src="2.jpg" style="width:100%" data-src="" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h2>
Headling 2</h1>
<p> Description 2</p>
</div>
</div>
</div>
<div class="item"> <img src="1.jpg" style="width:100%" data-src="" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h2>
Headling 3</h1>
<p> Description 3</p>
</div>
</div>
</div>
</div>
图片的 src 属性指定图片的 URL，data-src 是图片的占位图片的 URL。幻灯片的圆点导航按钮的 HTML 结构如下：
<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<
data-slide-to 属性指定该按钮与幻灯片的哪个 slide 对应，当前激活的 slide 用 class active 表示。幻灯片左右导航箭头按钮的 HTML 代码如下：
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
data-slide 属性指定是向前还是向后的箭头导航。箭头图标使用的是 Boostrap 内嵌的左右箭头字体图标。在页面中放入上面的代码，不需要再使用额外的 js 代码来初始化该幻灯片插件，即可使它开始正常工作。
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
