swiper插件--实现轮播图

swiper是jquery中已经定义好的一个插件，用来实现动态的轮播

1.可以在官网上直接下载所需引入的文件
https://www.swiper.com.cn/

2.将下载好的文件引入
顺序如下：（必须先引入jquery.js文件再引入swiper.jquery.js文件，因为后者是依赖于前者的）

<link rel="stylesheet" href="css/swiper-3.4.2.min.css"> 
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="js/swiper-3.4.2.jquery.min.js"> </script>

3.具体的实现代码如下：（其中的类名都是插件内定义好的，自己是不可以换的哦）

css：

.swiper-container {
    
    
  width: 100%;
  height: 100%;
}
.swiper-slide {
    
    
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
/* 设置底部分页图标的样式 */
.swiper-pagination-bullet{
    
    
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #d5d5d5;
    margin-left: 10px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    opacity: 1;
}
.swiper-pagination-bullet-active{
    
    
    background: #fe6406;
}

html：

<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src="img/3.png" width="650" height="350"/></div>
		<div class="swiper-slide"><img src="img/4.png" width="650" height="350"/></div>
		<div class="swiper-slide"><img src="img/5.png" width="650" height="350"/></div>
	</div>
	<!-- 添加分页器 -->
	<div class="swiper-pagination"></div>
	<!--添加前进后退按钮-->
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>

js：

 $(function(){
    
    
  /*轮播事件 开始*/
  var mySwiper = new Swiper('.swiper-container', {
    
    
      pagination : '.swiper-pagination',
	  nextButton: '.swiper-button-next',
	  prevButton: '.swiper-button-prev',
	  autoplayDisableOnInteraction : false,
      autoplay : 2000,
      paginationClickable: true,
  });
  /*轮播事件 结束*/
 })