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插件来实现功能，能够提升一个项目的质量和开发效率。