这是一款效果非常酷的基于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代码来初始化该幻灯片插件，即可使它开始正常工作。
