swiper制作移动端轮播图

2017-04-10

swiper.js

Swiper(前称Swiper master)是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（translate），主要应用在移动端开发轮播图等，虽主要是为ios开发的，但在android以及部分pc端有着较好的用户体验。
使用swiper较为简单，其包含主要两个包，swiper.css和swiper.js，通过添加类，控制轮播图等各种效果。

初始化

首先，要有swiper的结构

<div class="swiper-container">
<!--轮播内容集合-->
    <div class="swiper-wrapper">
        <div class="swiper-slide">
        <img src="" alt="">
</div>
        <div class="swiper-slide">
        <img src="" alt="">
</div>
<!--分页器-->
<div class="swiper-pagination"></div>
<!--左右切换按钮-->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!--进度条-->
<div class="swiper-scrollbar"></div>
</div>
</div>

一般的轮播图最多也就这些组件了，移动端一般更是切换和进度条都不需要,有了html，接下来看看js，Swiper采用的是面向对象，实例化走起Swiper的API

var mSwiper = new Swiper('.swiper-container' ,{
    //这里是精髓,Swiper第二个对象参数里提供了大量操作轮播图的属性，这里不一一细说，可以查阅api：
    loop:true,
    speed:1000,
    autoplay:1000,
    pagination:'.swiper-pagination',
    paginationType:'bullet',//bullets圆点（默认）‘fraction’  分式 ；‘progress’  进度条；‘custom’ 自定义
    effect:'slide',//也可设置为"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）
    onInit:function (swiper) {//回调函数，包括onTouchStart/onTouchEnd etc.
                console.log(swiper.activeIndex);//2，
            }//还提供了事件和回掉函数已经部分可操作属性
})

swiper 图片延迟加载

Swiper还提供了图片延迟加载，在新闻/购物类较复杂的webapp等推荐使用,只需三步
第一步，图片加载路径变更src==> data-src

1
2
3

<div class="swiper-slide">
    <img data-src="" alt="">
</div>

第二步，添加加载背景

1	<div class="swiper-lazy-preloading"></div>

第三步，实例化时添加属性

var mSwiper = new Swiper('.swiper-container',{
    //......
    lazyLoading:true
    //.......
})

不过在实际应用中，常会碰到样式问题，无须担心啊，直接进swiper.css修改样式即可。