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">&lsaquo;</a>
     <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</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插件来实现功能，能够提升一个项目的质量和开发效率。