apiCloud组件：swiper

一、apicloud中基于swiper封装了一个模块供调用。就是swiper.js

页面引入js就行

<script type="text/javascript" src="../script/swipe.js"></script>

方法有

startSlide: 4,  //起始图片切换的索引位置
auto: 3000, //设置自动切换时间，单位毫秒
continuous: true,  //无限循环的图片切换效果
disableScroll: true,  //阻止由于触摸而滚动屏幕
stopPropagation: false,  //停止滑动事件
callback: function(index, element) {},  //回调函数，切换时触发
transitionEnd: function(index, element) {}  //回调函数，切换结束调用该函数。

除此之外，还有一些比较使用的API方法，例如：

prev()：上一页
next()：下一页
getPos()：获取当前页的索引
getNumSlides()：获取所有项的个数
slide(index, duration)：滑动方法

Swipe使用方法

了解基本函数方法后，我们就来看看使用方法。

首先是HTML结构：

<div id='slider' class='swipe'>
        <div class='swipe-wrap'>
            <div class="swipe-box">
                <img src="../image/firstcover01.png" alt="">
            </div>
            <div class="swipe-box">
                <img src="../image/firstcover02.png" alt="">
            </div>
            <div class="swipe-box">
                <img src="../image/firstcover03.png" alt="">
            </div>
        </div>
    </div>

然后是样式代码：

.swipe {
    overflow: hidden;
    visibility: hidden;
    position: relative;
}
.swipe-wrap {
    overflow: hidden;
    position: relative;
}
.swipe-wrap > figure {
    float: left;
     100%;
    position: relative;
}

.swipe {
100%;
background-color: #fff;
overflow: hidden;
position: relative;
}

.swipe-wrap {
overflow: hidden;
position: relative;
}

.swipe-wrap .swipe-box {
float: left;
100%;
position: relative;
overflow: hidden;
}

.swipe-box img {
100%;
border-radius: 10px;
}

.swipe .title-box {
100%;
position: relative;
}

js调用

var slider = Swipe(document.getElementById('slider'), {
  auto: 3000,
            continuous: true,
});

在这里只要把上面介绍的函数参数写在里面，就可以实现相对应的功能。

最后我们也可以给滑动切换添加上下按钮：

<button onclick="Swipe.prev()">prev</button>
<button onclick="Swipe.next()">next</button>

apicloud调用

var slider =  Swipe( $api.dom('#slider'), {
            auto: 3000,
            continuous: true,
        });

 这个实现之后没有都点的变化，想要都点的变化：

#swipeIndicator {
            position: absolute;
            left: 50%;
            bottom: 14px;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
        }

        #swipeIndicator li {
            height: 10px;
             10px;
            border-radius: 100%;
            float: left;
            background: rgba(0, 0, 0, .8);
            margin-right: 10px;
        }

        #swipeIndicator li.active {
            background: #ff4d4d;
        }

<div id='slider' class='swipe'>
        <div class='swipe-wrap'>
            <div class="swipe-box">
                <img src="../image/b1.png" alt="">
            </div>
            <div class="swipe-box">
                <img src="../image/b2.png" alt="">
            </div>
            <div class="swipe-box">
                <img src="../image/b3.png" alt="">
            </div>
        </div>
        <div class="title-box">
            <ul id="swipeIndicator" class="title-box-ul">
                <li class="active"></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

js

//轮播组件
    window.onload = function() {
        var li = $api.domAll('.title-box-ul li');
        var mySwiper = Swipe($api.byId('slider'), {
            auto: 3000,
            speed: 800,
            continuous: true,
            callback: function(index, elem) {
                var i = li.length;
                while (i--) {
                    li[i].className = '';
                }
                li[index].className = 'active';
            }
        });
    };

 二、原生轮播模块 UIScrollPicture