Swiper开篇

一 关于Swiper

   swiper是一款轻量级以及免费的移动设备触控滑块的js框架，主要运用于移动端的操作，但也可以用于pc端页面效果制作，完全的开源免费，

二 学习Swiper

　Swiper官网提供了学习方法以及API文档，为我们学习提供了很大的帮助，在学习之前可以先看一下官网的在线演示效果，包括基础演示和精彩移动端以及PC端的页面展示，了解Swiper的精彩之处，下面通过一个京东主页面的轮播来介绍Swiper（京东轮播图属于固定大小的轮播图，比较简单）

  1.准备工作

      首先我们需要下载swiper，官方网站提供，可以下载完整的zip文件包，也可以只下载这三个文件（jquery-1.11.3.min.js    swiper.min.js   swiper.min.css ）,新建文件夹js和css，将js文件放在js中，将css文件放在css中，同时去京东官网获取轮播图片，放在image文件夹下

  2  新建html文件 

    将下载的文件引入到页面中，官网中介绍了，首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN

<title>京东轮播</title>     <link rel="stylesheet" href="css/swiper.min.css" >     <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-1.11.3.min.js"></script>     <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/swiper.min.js"></script>

 3  HTML内容。

    <div class="swiper-container myswiper"> //一个大容器装载内容，高度是有内部的内容撑起     <div class="swiper-wrapper">         <div class="swiper-slide">             <a href="#"> //因为京东的图片是链接，图片包裹在a中                 <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="image/1.jpg" alt="">  //可以直接获取图片的网页地址             </a>         </div>         <div class="swiper-slide">              <a href="#">                 <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="image/2.jpg" alt="">             </a>         </div>         <div class="swiper-slide">              <a href="#">                 <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="image/3.jpg" alt="">             </a>         </div>         <div class="swiper-slide">              <a href="#">                 <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="image/4.jpg" alt="">             </a>         </div>         <div class="swiper-slide">              <a href="#">                 <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="image/5.jpg" alt="">             </a>         </div>     </div>     <!-- 如果需要分页器 -->     <div class="swiper-pagination"></div> //就是下面的小圆点          <!-- 如果需要导航按钮 -->     <div class="swiper-button-prev swiper-button-white butt"></div> //向左的箭头     <div class="swiper-button-next"></div> //向右的箭头           <!--如果需要滚动条 -->     <!--<div class="swiper-scrollbar"></div>//此处不需要，京东轮播图不需要 </div>-->

3 .给Swiper定义一个大小

        因为京东图片大小为540*470，你可以直接在swiper-container中定义大小，也可以重新定义一个class来定义大小（此处我用myswiper）

   *{             margin:0;             padding:0;         }         .myswiper{             width:590px;             height: 470px;         }

4.初始化Swiper：最好是挨着</body>标签（如果没有紧挨着可以在函数前加函数）

<script>           var mySwiper = new Swiper ('.swiper-container', {     // direction: 'vertical', //京东默认为水平滑动，因此不需要，如果是垂直方向滑动，加上此属性     loop: true,//此处代表环路，就是滑动到最后一张之后，又重新回到第一章图片，形成一个环路     autoplay:1000, //表示自动轮播          // 如果需要分页器     pagination: {       el: '.swiper-pagination',//图片切换至某页，小圆点颜色改变       clickable: true,       clickableClass : 'my-pagination-clickable',//后两句表面鼠标点击小圆点时，也能切换，          },          // 如果需要前进后退按钮     navigation: {       nextEl: '.swiper-button-next',       prevEl: '.swiper-button-prev',     },//前进和后退的按钮，有很多样式的按钮，可以改变大小和颜色          // 如果需要滚动条     // scrollbar: {     //   el: '.swiper-scrollbar',     // },   })           </script>

完整代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>京东轮播</title>    <link rel="stylesheet" href="css/swiper.min.css" >    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-1.11.3.min.js"></script>    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/swiper.min.js"></script>    <style>//需要更改那个属性，就重新写css样式进行覆盖        *{            margin:0;            padding:0;        }        .myswiper{            width:590px;            height: 470px;            border:1px solid red;        }        .swiper-button-next, .swiper-button-prev{            width:20px;            height: 21px;
        }        .mySwiperBut{            background-image: none;            width:24px;            height: 40px;            background: rgba(0,0,0,.3);            text-align: center;            line-height: 40px;            color: hsla(0,0%,100%,.4);            font-size: 18px;         }//向前向后按钮的共同样式        .mySwiperBut:hover{             background: rgba(0,0,0,.6);        }        .swiper-pagination-bullet{            width: 7px;            height: 7px;            border:2px solid #fff;            transition: all .2s ease;            background: transparent;             z-index: 1000000;        }//分页小圆点的样式        .swiper-button-prev {            left: 0px;        }        .swiper-button-next {            right: 0px;        }        .swiper-pagination{            text-align: left;            margin-left: 46px;            bottom:20px;        }        .swiper-pagination-bullet-active{            background: #fff;            opacity: 1;            /*border:2px solid #b9beba;*/            /*transition: background .2s ease;*/
        }    </style></head><body>    <div class="swiper-container myswiper">    <div class="swiper-wrapper">        <div class="swiper-slide">            <a href="#">                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="image/1.jpg" alt="">            </a>        </div>        <div class="swiper-slide">             <a href="#">                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="image/2.jpg" alt="">            </a>        </div>        <div class="swiper-slide">             <a href="#">                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="image/3.jpg" alt="">            </a>        </div>        <div class="swiper-slide">             <a href="#">                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="image/4.jpg" alt="">            </a>        </div>        <div class="swiper-slide">             <a href="#">                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="image/5.jpg" alt="">            </a>        </div>
    </div>    <!-- 如果需要分页器 -->    <div class="swiper-pagination"></div>        <!-- 如果需要导航按钮 -->    <div class="swiper-button-prev  mySwiperBut"><</div>    <div class="swiper-button-next  mySwiperBut">></div>         <!--如果需要滚动条 -->    <!--<div class="swiper-scrollbar"></div></div>--><script>          var mySwiper = new Swiper ('.swiper-container', {    // direction: 'vertical',    loop: true,    autoplay:true,        // 如果需要分页器    pagination: {      el: '.swiper-pagination',      clickable: true,      clickableClass : 'my-pagination-clickable',        },        // 如果需要前进后退按钮    navigation: {      nextEl: '.swiper-button-next',      prevEl: '.swiper-button-prev',    },        // 如果需要滚动条    // scrollbar: {    //   el: '.swiper-scrollbar',    // },  })          </script></body></html>

原文出处：https://www.cnblogs.com/qianqian-it/p/9583300.html