slideshow 轮播的使用方法介绍

无论是在制作网页还是移动端的H5页面时，都会用到轮播效果。除非是大神，什么插件都从头自己写，不然选择一款优秀的插件还是可以提高开发的效率。下面博主介绍两款常用到的轮播组件

Bootstrap自带的轮播功能widget

首先引用文件，缺一不可

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

Bootstrap中只需要使用相应的class就可以方便的使用功能

<div id="myCarousel" class="carousel slide">
<!--轮播进度-->
<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>
<!--轮播项目-->
<div class="carousel-inner">
<div class="item active">
<img src="images/slide1" alt="First slide">
<div class="carousel-caption">标题 1</div>
</div>
<div class="item">
<img src="images/slide2" alt="Second slide">
<div class="carousel-caption">标题 1</div>
</div>
<div class="item">
<img src="images/slide3" alt="Third slide">
<div class="carousel-caption">标题 1</div>
</div>
</div>
<!--轮播导航-->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
轮播（Carousel）可以通过JavaScript手动调用

$('.carousel').carousel();

Swiper : 免费的开源移动端触摸插件

Swiper有着更加强大的功能

官方文档

引用文件

<link rel="stylesheet" href="css/swiper-3.3.1.min.css">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/swiper-3.3.1.jquery.min.js"></script>

开始使用 :

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/slide1.jpg" alt="轮播图1"></div>
<div class="swiper-slide"><img src="images/slide2.jpg" alt="轮播图2"></div>
<div class="swiper-slide"><img src="images/slide3.jpg" alt="轮播图3"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

JS文件

//首页轮播
$(document).ready(function(){
var swiper = new Swiper('.swiper-container',{
autoplay : 1000,  //自动轮播，时间间隔1s
loop : true,  //是否开启循环
pagination: '.swiper-pagination',  //下方的轮播进度
autoplayDisableOnInteraction : false,  //用户操作轮播后不禁止自动切换
paginationClickable :true,  //点击下方轮播进度会自动切换
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next',
});
});

总结 : 学会使用现成的JS插件来实现功能，能够提升一个项目的质量和开发效率。