快速实现图片轮播

/n

了解Swiper

是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。主要是为IOS而设计的，同时，在Android、WP8系统以及现代桌面浏览器也有着良好的用户体验。

代码实现


<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
  <style type="text/css">
   *{
    padding: 0;
    margin: 0;
   }
   html,body{
    width: 100%;     
    height: 100%;
   }
   .swiper-container{
    width: 100%;
    height: 100%;
    /*width: 500px;*/
    /*height: 500px;*/
   }
    .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;
      }
     p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Monaco; color:   
    #2b7ec3}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Monaco; 
     color: #d74200}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px 
     Monaco; color: #289c97}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 
     20.0px Monaco}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px 
     Monaco; color: #4a8a01}p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 
     20.0px Monaco; color: #060606}p.p7 {margin: 0.0px 0.0px 0.0px 0.0px; 
    font: 20.0px Monaco; color: #a5b2b9}p.p8 {margin: 0.0px 0.0px 0.0px 
    0.0px; font: 20.0px Monaco; color: #4f5d66}p.p9 {margin: 0.0px 0.0px 
    0.0px 0.0px; font: 20.0px Monaco; color: #4f5d66; min-height: 
    27.0px}p.p10 
    {margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Monaco; color: #ad42ef; 
   min-height: 27.0px}span.s1 {color: #4f5d66}span.s2 {color: 
   #2b7ec3}span.s3 {color: #48565d}span.s4 {color: #289c97}span.s5 {color:
   #d74200}span.s6 {color: #929151}span.s7 {color: #060606}span.s8 {color: 
   #ad42ef}span.s9 {color: #4a8a01}span.s10 {color: #698906}span.s11 
   {color: #000000}span.s12 {color: #d16400}span.s13 {color: 
   #a5b2b9}span.s14 {color: #4663cc}span.Apple-tab-span {white-space:pre}

  </style>
 </head>
 <body>
  <div class="swiper-container">   <!--//固定写法   表示一个容器-->  
   <div class="swiper-wrapper">
    <div class="swiper-slide">1
     ![](http://img1.imgtn.bdimg.com/it/u=154767852,2436302701&fm=21&gp=0.jpg)
    </div>   <!--几个页面写几个div-->
    <div class="swiper-slide">2
     ![](http://img3.imgtn.bdimg.com/it/u=3137019665,1726860326&fm=21&gp=0.jpg)
    </div>
    <div class="swiper-slide">3
     ![](https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=510403521,2810620239&fm=21&gp=0.jpg)
    </div>
    <div class="swiper-slide">4
     ![](http://img3.imgtn.bdimg.com/it/u=3438260728,2567847969&fm=15&gp=0.jpg)
    </div>
    <div class="swiper-slide">5
     ![](http://img4.imgtn.bdimg.com/it/u=649344479,1356067277&fm=21&gp=0.jpg)
    </div>
   </div>      <!--//主体内容-->
   
   <!-- 小点-->
   <div class="swiper-pagination"></div>
   <!-- 左右按钮-->
   <div class="swiper-button-prev"></div>   <!--//上一页-->
   <div class="swiper-button-next"></div>    <!--//xia一页-->
  </div>
 </body>
</html>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript">
 var   swiper = new Swiper(".swiper-container",{
  // 1. 分页容器（小点）  (键值对形式 用逗号分隔)
  pagination:".swiper-pagination",
  // 小点可以点击
  paginationClickable:".swiper-pagination",
  //下一页按钮
  nextButton:".swiper-button-next",
  prevButton:".swiper-button-prev",
  //每页之间的空隙
  spaceBetween:20
  
 });    //新建一个对象
 // 滑动 swiper-container这个容器   固定写法
 
 
 
 
</script>